{% extends "healthcoach/healthcoach_base.html" %}

{% load i18n widget_tweaks %}

{% block head_title %}{% trans "Change Password" %}{% endblock %}

{% block title %}{% trans "Cambiar contraseña" %}{% endblock title %}

{% block breadcrumb_links %}
  <li class="breadcrumb-item"><a href="{% url "dashboard" %}">{% trans "Inicio" %}</a></li>
  <li class="breadcrumb-item active">{% trans "Cambiar contraseña" %}</li>
{% endblock breadcrumb_links %}

{% block content %}
  <div class="row">
    <div class="col">
      <div class="card">
        <div class="card-header text-center">
          <h5 class="mb-0">{% trans "Cambiar contraseña" %}</h5>
        </div>
        <div class="card-body">
          <form id="password-change-form" method="POST" action="{% url 'account_change_password' %}" class="password_change" novalidate autocomplete="off">
            {% csrf_token %}
            <div class="form-group">
              <label for="old-password-input">{% trans "Contraseña actual" %}</label>
              {% trans "Introduzca la contraseña actual" as placeholder_text %}
              {% with error_class=form.oldpassword.errors|yesno:"is-invalid,is-valid" placeholder="placeholder:"|add:placeholder_text %}
                {% if request.method == "POST" %}
                  {{ form.oldpassword|attr:"id:old-password-input"|add_class:error_class|add_class:"form-control"|attr:placeholder }}
                {% else %}
                  {{ form.oldpassword|attr:"id:old-password-input"|add_class:"form-control"|attr:placeholder }}
                {% endif %}
              {% endwith %}
              <div class="invalid-feedback">
                {{ form.oldpassword.errors.0 }}
              </div>
            </div>
            <div class="form-group">
              <label for="password1-input">{% trans "Nueva contraseña" %}</label>
              {% trans "Introduzca la nueva contraseña" as placeholder_text %}
              {% with error_class=form.password1.errors|yesno:"is-invalid,is-valid" placeholder="placeholder:"|add:placeholder_text %}
                {% if request.method == "POST" %}
                  {{ form.password1|attr:"id:password1-input"|add_class:error_class|add_class:"form-control"|attr:placeholder }}
                {% else %}
                  {{ form.password1|attr:"id:password1-input"|add_class:"form-control"|attr:placeholder }}
                {% endif %}
              {% endwith %}
              <div class="invalid-feedback">
                {{ form.password1.errors.0 }}
              </div>
            </div>
            <div class="form-group">
              <label for="password2-input">{% trans "Nueva contraseña (de nuevo)" %}</label>
              {% trans "Introduzca otra vez la nueva contraseña" as placeholder_text %}
              {% with error_class=form.password2.errors|yesno:"is-invalid,is-valid" placeholder="placeholder:"|add:placeholder_text %}
                {% if request.method == "POST" %}
                  {{ form.password2|attr:"id:password2-input"|add_class:error_class|add_class:"form-control"|attr:placeholder }}
                {% else %}
                  {{ form.password2|attr:"id:password2-input"|add_class:"form-control"|attr:placeholder }}
                {% endif %}
              {% endwith %}
              <div class="invalid-feedback">
                {{ form.password2.errors.0 }}
              </div>
            </div>
          </form>
        </div>
        <div class="card-footer text-center">
          <button type="submit" form="password-change-form" class="btn btn-primary" name="action">{% trans "Cambiar" %}</button>
        </div>
      </div>
    </div>
  </div>
{% endblock %}