{% extends "mvp/entrance.html" %}
{% load i18n %}
{% comment %}
  Overrides {% block entrance %} rather than {% block content %} so the sign-in
  form can ask for a narrower card than the entrance default.
{% endcomment %}
{% block entrance %}
  <c-mvp.entrance size="md" full-height>
    {% block content %}
      {% include "mvp/account/_development_notice.html" %}
      {% if form.errors %}
        <c-alert variant="error" class="mb-6" only>
          <span>{% trans "Invalid username or password." %}</span>
        </c-alert>
      {% endif %}
      <h2 class="text-center mb-6">{% trans "Sign in to your account" %}</h2>
      <c-mvp.form method="post"
              action="{% url 'account_login' %}"
              class="space-y-4">
        {% with field=form.username %}
          <c-form.fieldset id="{{ field.id_for_label }}-field"
                           :errors="field.errors"
                           only>
            <c-form.label for="{{ field.id_for_label }}" only>
              {{ field.label }}<span class="text-error" aria-hidden="true">*</span>
            </c-form.label>
            {% if field.errors %}
              <c-form.input id="{{ field.id_for_label }}"
                            name="{{ field.html_name }}"
                            placeholder="{{ field.label }}"
                            autocomplete="username"
                            class="w-full"
                            variant="error"
                            aria-invalid="true"
                            aria-describedby="{{ field.id_for_label }}-field-errors"
                            required
                            only />
            {% else %}
              <c-form.input id="{{ field.id_for_label }}"
                            name="{{ field.html_name }}"
                            placeholder="{{ field.label }}"
                            autocomplete="username"
                            class="w-full"
                            required
                            only />
            {% endif %}
          </c-form.fieldset>
        {% endwith %}
        {% with field=form.password %}
          <c-form.fieldset id="{{ field.id_for_label }}-field"
                           :errors="field.errors"
                           only>
            <c-form.label for="{{ field.id_for_label }}" only>
              {% trans "Password" %}<span class="text-error" aria-hidden="true">*</span>
            </c-form.label>
            {% if field.errors %}
              <c-form.input type="password"
                            id="{{ field.id_for_label }}"
                            name="{{ field.html_name }}"
                            placeholder="{% trans "Password" %}"
                            autocomplete="current-password"
                            class="w-full"
                            variant="error"
                            aria-invalid="true"
                            aria-describedby="{{ field.id_for_label }}-field-errors"
                            required
                            only />
            {% else %}
              <c-form.input type="password"
                            id="{{ field.id_for_label }}"
                            name="{{ field.html_name }}"
                            placeholder="{% trans "Password" %}"
                            autocomplete="current-password"
                            class="w-full"
                            required
                            only />
            {% endif %}
          </c-form.fieldset>
        {% endwith %}
        <c-button type="submit"
                  variant="primary"
                  text="{% trans "Sign In" %}"
                  class="w-full" only />
        <input type="hidden" name="next" value="{{ next }}" />
      </c-mvp.form>
    {% endblock content %}
  </c-mvp.entrance>
{% endblock entrance %}