<!--
 Copyright European Organization for Nuclear Research (CERN)

 Licensed under the Apache License, Version 2.0 (the "License");
 You may not use this file except in compliance with the License.
 You may obtain a copy of the License at
 http://www.apache.org/licenses/LICENSE-2.0

 Authors:
 - Mario Lassnig, <mario.lassnig@cern.ch>, 2014
 - Thomas Beermann, <thomas.beermann@cern.ch>, 2014-2019
 - Martin Barisits, <martin.barisits@cern.ch>, 2014
 - Cedric Serfon, <cedric.serfon@cern.ch>, 2015-2019
 - Vincent Garonne, <vincent.garonne@cern.ch>, 2015
 - Ruturaj Gujar, <ruturaj.gujar23@gmail.com>, 2019
-->

<!DOCTYPE html>
<html>
<head>
  <title>Rucio UI - Login</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
  <link rel="icon" href="/favicon.ico" type="image/x-icon">
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.min.css">
  <link rel="stylesheet" href="//cdn.jsdelivr.net/foundation/5.4.4/css/foundation.min.css">
  <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.16/css/jquery.dataTables.css">
  <link rel="stylesheet" href="/static/rucio.css?version=9fbb2bab0b085dc2065ed24e8e658787">
  <link rel="stylesheet" href="/static/foundation-icons.css">
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
  <link rel="stylesheet" href="/static/chosen.min.css">
  <script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
  <script src="//code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
  <script src="//cdn.jsdelivr.net/foundation/5.4.4/js/foundation.min.js"></script>
  <script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.16/js/jquery.dataTables.js"></script>
  <script src="//code.highcharts.com/highcharts.js"></script>
  <script src="//code.highcharts.com/modules/exporting.js"></script>
  <script src="/static/jquery.storageapi.min.js"></script>
  <script src="/static/filesize.min.js"></script>
  <script src="/static/chosen.jquery.min.js"></script>
  <script src="/static/rucio.js?version=c4c9966296a7478d8156131d9733e002"></script>
  <script src="/static/base.js?version=c25299da061163ff63c5927f87290e9a"></script>
  <script src="/static/version.js"></script>
  <script>
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
    ga('create', 'UA-32728665-2', 'auto');
    ga('require', 'linkid', 'linkid.js');
    ga('send', 'pageview');
  </script>
  <script src="/static/login.js"></script>
</head>

<body>
  <nav class="top-bar" data-topbar role="navigation">
    <ul class="title-area">
      <li class="name">
        <h1><a href="/">Rucio UI</a></h1>
      </li>
      <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
    </ul>
  </nav>

  <div id="content" style="margin: 1em;">
    <div id="results" class="row">

      <div id="t_data" class="columns panel">
        <div class="row">
          <div class="large-11 columns">
            <h3>Login to Rucio</h3>
          </div>
        </div>
        <form id="login_form" method="POST" action="/ui/login">
          <div class="row">
            <div class="large-6 columns center">
              <label>Username
                <input type="text" name="username" id="username" placeholder="Enter username here..."/>
              </label>
            </div>
          </div>
          <div class="row">
            <div class="large-6 columns center">
              <label>Password
                <input type="password" name="password" placeholder="Enter password here..." id="password"/ >
              </label>
            </div>
          </div>
          <br>
          <div class="row">
            <div class="large-6 columns center">
              <input class="button small postfix" id="login_button" type="submit" name="submit" value="Login" onclick="display_spinner()">
            </div>
          </div>        
        </form>
        <center><p>OR</p></center>
        <div class="row">
          <div class="large-6 columns center">
            <a href="/ui/saml" class="button small postfix" id="saml_button" onclick="display_spinner()">Login with CERN SSO</a>
          </div>
        </div>  
      </div>
    </div>
    <div id="loader"></div>
  </div>
  
</body>
</html>