{% extends 'conjunto/layouts/html.html' %}
{% load i18n static %}

{% block page %}
  <div class="container container-tight py-4">
    <div class="text-center mb-4">
      <a href="{% url 'medspeak:home' %}" class="navbar-brand navbar-brand-autodark">
        <img src="{% static 'images/brand.svg' %}"  alt="MedSpeak" class="navbar-brand-image">
      </a>
    </div>
    {% block content %}
      <div class="card card-md">
        <form action="{% url 'login' %}" method="post">
          {% csrf_token %}
          <div class="card-body">
            <h2 class="h2 text-center mb-4">{% translate 'Login' %}</h2>

            {% if form.non_field_errors %}
              <div class="alert alert-danger">
                <ul>
                  {% for error in form.non_field_errors %}
                    <li>{{ error }}</li>
                  {% endfor %}
                </ul>
              </div>
            {% endif %}
            <div class="mb-3 {%if field.errors %}has-error{%endif%}">
              <label class="form-label">{% translate 'User name' %}</label>
              <input type="text" autofocus class="form-control{% if form.username.errors %} is-invalid{% endif %}" name="username" placeholder="{% translate 'Your username' %}">
              {% for error in form.username.errors %}
                <div class="invalid-feedback">{{ error }}</div>
              {% endfor %}
              {#                <div class="invalid-feedback">Invalid feedback</div>#}
            </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{% if form.password.errors %} is-invalid{% endif %}" 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>#}
                {% for error in form.password.errors %}
                  <div class="invalid-feedback">{{ error }}</div>
                {% endfor %}
              </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>
          </div>

          {% block extra-form-content %}
            {% 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 %}
          {% endblock %}
        </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>
    {% endblock %}
  </div>
{% endblock %}