{% extends 'html.html' %}
{% load i18n static %}

{% block page %}
  <div class="container container-tight py-4">
    <div class="text-center mb-4">
      <a href="{% url 'login' %}" class="navbar-brand navbar-brand-autodark">
        <img src="{% static 'images/brand.svg' %}"  alt="MedSpeak" class="navbar-brand-image">
      </a>
    </div>
    <div class="card card-md">
      <form action="." method="post">
        {% csrf_token %}
        <div class="card-body">
          <h2 class="h2 text-center mb-4">{% translate 'Login' %}</h2>
          <form action="{% url 'login' %}" method="post" novalidate>
            <div class="mb-3 {%if field.errors %}has-error{%endif%}">
              <label class="form-label">{% translate 'User name' %}</label>
              <input type="text" class="form-control" name="username">
              {{ form.username.errors }}
            </div>
            <div class="mb-2" x-data="{ hide: true }">
              <label class="form-label">
                {% translate 'Password' %}
              </label>
              <div class="input-group input-group-flat">
                <input :type="hide ? 'password' : 'text'" class="form-control" placeholder="{% translate 'Your password' %}" autocomplete="off" name="password">
                <span class="input-group-text">
                  <a href="#" class="link-secondary" aria-label="{% translate 'Show password' %}" @click="hide = !hide">
                    <i class="ti" :class="hide? 'ti-eye' : 'ti-eye-off'"></i>
                  </a>
                </span>
              </div>
              <span class="form-label-description">
                <a href="{% url 'password_reset' %}">{% translate 'I forgot my password' %}</a>
              </span>
            </div>

            {% if False %}
              <div class="mb-2">
                <label class="form-check">
                  <input type="checkbox" class="form-check-input" >
                  <span class="form-check-label">{% translate 'Remember me on this device' %}</span>
                </label>
              </div>
            {% endif %}

            <div class="form-footer">
              <button type="submit" class="btn btn-primary w-100">{% translate 'Sign in' %}</button>
            </div>
          </form>
        </div>

        {% if false %}
          <div class="hr-text">{% translate 'or' %}</div>
          <div class="card-body">
            <div class="row">
              <div class="col"><a href="#" class="btn w-100">
                <!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
                <svg xmlns="http://www.w3.org/2000/svg" class="icon text-github" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5"></path></svg>
                Login with Github
              </a></div>
              <div class="col"><a href="#" class="btn w-100">
                Login with Twitter
              </a></div>
            </div>
          </div>
        {% endif %}
      </form>
    </div>

    <div class="text-center text-secondary mt-3">
      {% translate "Don't have an account yet?" %}
      <a href="{% url 'medspeak:signup' %}" tabindex="-1">{% translate 'Sign up' %}</a>
    </div>
  </div>
{% endblock %}