{% extends "healthcoach/healthcoach_base.html" %}
{% load static i18n widget_tweaks %}


{% block extra_head %}
  <link href="{% static 'material-pro/assets/plugins/bootstrap-datepicker/bootstrap-datepicker.min.css' %}" rel="stylesheet">
  <link href="{% static 'css/timeline-left.css' %}" rel="stylesheet">
{% endblock extra_head %}


{% block extra_body %}
{% endblock extra_body %}

{% block title %}{% trans "Mi Perfil" %}{% endblock title %}

{% block breadcrumb_links %}
  <li class="breadcrumb-item"><a href="{% url "dashboard" %}">{% trans "Inicio" %}</a></li>
  <li class="breadcrumb-item active">{% trans "Mi Perfil" %}</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 "Información de usuario" %}</h5>
        </div>
        <div class="card-body">
          <div class="row">
            <div class="col-sm">
              <small class="text-muted db">{% trans "Nombre" %}</small>
              <h6>{{ profile.first_name }}</h6>
            </div>
            <div class="col-sm">
              <small class="text-muted db">{% trans "Apellidos" %}</small>
              <h6>{{ profile.last_name }}</h6>
            </div>
            <div class="col-sm">
              <small class="text-muted db">{% trans "Nombre de usuario" %}</small>
              <h6>{{ profile.username }}</h6>
            </div>
            <div class="col-sm">
              <small class="text-muted db">{% trans "Email" %}</small>
              <h6>{{ profile.email }}</h6>
            </div>
          </div>
        </div>
        <div class="card-footer border-bottom text-center">
          <button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#profile-form-container" aria-expanded="false" aria-controls="profile-form-container">{% trans "Modificar datos" %}</button>
          <a href="{% url "account_change_password" %}" class="btn btn-primary">{% trans "Cambiar contraseña" %}</a>
        </div>
        <div id="profile-form-container" class="collapse {% if request.method == "POST" %}show{% endif %}">
          <div class="card-body">
            <form id="profile-form" method="post" action="" novalidate autocomplete="off">
              {% csrf_token %}
              <div class="form-group">
                <label for="first-name-input">{% trans "Nombre" %}</label>
                {% trans "Introduzca un nombre" as placeholder_text %}
                {% with error_class=form.first_name.errors|yesno:"is-invalid,is-valid" placeholder="placeholder:"|add:placeholder_text %}
                  {% if request.method == "POST" %}
                    {{ form.first_name|attr:"id:first-name-input"|add_class:error_class|add_class:"form-control"|attr:placeholder }}
                  {% else %}
                    {{ form.first_name|attr:"id:first-name-input"|add_class:"form-control"|attr:placeholder }}
                  {% endif %}
                {% endwith %}
                <div class="invalid-feedback">
                  {{ form.first_name.errors.0 }}
                </div>
              </div>
              <div class="form-group">
                <label for="last-name-input">{% trans "Apellidos" %}</label>
                {% trans "Introduzca los apellidos" as placeholder_text %}
                {% with error_class=form.last_name.errors|yesno:"is-invalid,is-valid" placeholder="placeholder:"|add:placeholder_text %}
                  {% if request.method == "POST" %}
                    {{ form.last_name|attr:"id:last_name-input"|add_class:error_class|add_class:"form-control"|attr:placeholder }}
                  {% else %}
                    {{ form.last_name|attr:"id:last_name-input"|add_class:"form-control"|attr:placeholder }}
                  {% endif %}
                {% endwith %}
                <div class="invalid-feedback">
                  {{ form.last_name.errors.0 }}
                </div>
              </div>
              <div class="form-group">
                <label for="username-input">{% trans "Nombre de usuario" %}</label>
                {% trans "Introduzca el nombre de usuario" as placeholder_text %}
                {% with error_class=form.username.errors|yesno:"is-invalid,is-valid" placeholder="placeholder:"|add:placeholder_text %}
                  {% if request.method == "POST" %}
                    {{ form.username|attr:"id:username-input"|add_class:error_class|add_class:"form-control"|attr:placeholder }}
                  {% else %}
                    {{ form.username|attr:"id:username-input"|add_class:"form-control"|attr:placeholder }}
                  {% endif %}
                {% endwith %}
                <div class="invalid-feedback">
                  {{ form.username.errors.0 }}
                </div>
              </div>
              <div class="form-group">
                <label for="email-input">{% trans "Email" %}</label>
                {% trans "Introduzca el correo electrónico" as placeholder_text %}
                {% with error_class=form.email.errors|yesno:"is-invalid,is-valid" placeholder="placeholder:"|add:placeholder_text %}
                  {% if request.method == "POST" %}
                    {{ form.email|attr:"id:email-input"|add_class:error_class|add_class:"form-control"|attr:placeholder|attr:"type:search" }}
                  {% else %}
                    {{ form.email|attr:"id:email-input"|add_class:"form-control"|attr:placeholder|attr:"type:search" }}
                  {% endif %}
                {% endwith %}
                <div class="invalid-feedback">
                  {{ form.email.errors.0 }}
                </div>
              </div>
            </form>
          </div>
          <div class="card-footer text-center">
            <button type="submit" form="profile-form" class="btn btn-primary">{% trans "Guardar" %}</button>
          </div>
        </div>
      </div>
    </div>
 {% endblock %}