{% load i18n %}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  {% if first_login_ever %}
    <title>{% trans "Hue - Sign up" %}</title>
  {% else %}
    <title>{% trans "Hue - Sign in"%}</title>
  {% endif %}

  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="">
  <meta name="author" content="">

  <link href="/static/desktop/ext/css/bootplus.css" rel="stylesheet">
  <link href="/static/desktop/ext/css/font-awesome.min.css" rel="stylesheet">
  <link href="/static/desktop/css/hue3.css" rel="stylesheet">

  <style type="text/css">
    body {
      padding-top: 80px;
    }

    #logo {
      display: block;
      margin-left: auto;
      margin-right: auto;
      margin-bottom: 30px
    }

    .login-content {
      width: 400px;
      display: block;
      margin-left: auto;
      margin-right: auto;
    }

    .login-content label {
      margin-bottom: 20px;
      font-size: 16px;
    }

    .login-content input[type='text'] {
      width: 250px;
      font-size: 14px;
    }
    .login-content input {
      width: 80px;
      padding: 2px 8px;
      display: inline-block;
      height: 30px;
      min-height: 30px;
      margin: 0 0 10px 0;
    }
	.login-content h3 {
      text-align: center;
      margin: 0 0 -25px;
      font-size: 18px;
      color: silver;
    }
	
    hr {
      border-top-color: #DEDEDE;
    }

    ul.errorlist li {
      font-size: 13px;
      font-weight: normal;
      font-style: normal;
    }

    input.error {
      border-color: #b94a48;
      -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
      -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
      box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    }

    .well {
      border: 1px solid #D8D8D8;
      border-radius: 3px 3px 3px 3px;
    }

    .footer {
      position: fixed;
      bottom: 0;
      background-color: #338BB8;
      height: 4px;
      width: 100%;
    }
  </style>
</head>

<body>

<div class="footer"></div>

<div class="navigator">
  <div class="pull-right">
    <ul class="nav nav-pills">
      <li id="jHueTourFlagPlaceholder"></li>
    </ul>
  </div>
  <a class="brand nav-tooltip pull-left" href="#"><img src="/static/desktop/art/hue-logo-mini-white.png"
                                                       data-orig="/static/desktop/art/hue-logo-mini-white.png"
                                                       data-hover="/static/desktop/art/hue-logo-mini-white-hover.png"/></a>
  <ul class="nav nav-pills pull-left hide" id="visit">
    <li><a title="{% trans "Visit gethue.com" %}" href="http://gethue.com">{% trans "Fell asleep? Visit us on gethue.com instead!" %} <i class="fa fa-external-link-circle"></i></a></li>
  </ul>
</div>


<div class="container">
  <div class="row">
    <div class="login-content">
      <form method="POST" action="{{ action }}" class="well">
        {% csrf_token %}
        <img id="logo" src="/static/desktop/art/hue-login-logo.png" data-orig="/static/desktop/art/hue-login-logo.png"
             data-hover="/static/desktop/art/hue-login-logo-skew.png"/>

        {% if login_errors %}
            <div class="alert alert-error" style="text-align: center">
              <strong><i class="fa fa-exclamation-triangle"></i> {% trans  "Error!" %}</strong> {% trans  "Invalid username or password." %}
            </div>
        {% endif %}

        {% if first_login_ever %}
            <div class="alert alert-block">
              <i class="fa fa-exclamation-triangle"></i>
			  {% trans  "This is your first time logging in." %}
              <strong>{% trans  "You will become Hue superuser." %}</strong>.
            </div>
			<h3>{% trans "Use Your OpenID Identity" %}</h3>
            <hr/>
            <input type="submit" class="btn btn-large btn-primary" value="{% trans  "Sign up" %}"/>
        {% else %}
            <h3>{% trans "Use Your OpenID Identity" %}</h3>
			<hr/>
			{% if not hide_field %}
				{{ form.openid_identifier }}
			{% endif %}
            <input type="submit" name="bsignin" class="btn btn-large btn-primary" value="{% trans  "Sign in" %}"/>
        {% endif %}
        <input type="hidden" name="next" value="{{ next }}"/>
      </form>
    </div>
  </div>
</div>

<script src="/static/desktop/ext/js/jquery/jquery-2.1.1.min.js"></script>
<script>
  $(document).ready(function () {
    var _skew = -1;
    $("[data-hover]").on("mouseover", function () {
      var _this = $(this);
      _skew = window.setTimeout(function () {
        _this.attr("src", _this.data("hover"));
        $("#visit").removeClass("hide");
      }, 3000);
    });

    $("[data-hover]").on("mouseout", function () {
      $(this).attr("src", $(this).data("orig"));
      window.clearTimeout(_skew);
    });

    $("ul.errorlist").each(function () {
      $(this).prev().addClass("error");
    });
  });
</script>
</body>
</html>


