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

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

{% block extra_body %}
  <script type="text/javascript">
    {% include "healthcoach/inc.common_js_global_variables.html" %}
    const USER_ID = {{ user.id }};
    const PATIENT_ID = {{ pk }};
  </script>
  <script src="{% static 'material-pro/assets/plugins/bootstrap-datepicker/bootstrap-datepicker.min.js' %}"></script>
  <script src="{% static 'js/plugins/bootstrap-datepicker/locales/bootstrap-datepicker.es.min.js' %}"></script>
  <script src="{% static 'js/plugins/moment/moment-with-locales.min.js' %}"></script>
  <script type="text/javascript" src="{% static 'js/plugins/nunjucks/nunjucks.2018-06-19.js' %}"></script>
  <script type="text/javascript" src="{% static 'js/plugins/serializeJSON/serializeJSON-2.9.0.js' %}"></script>
  <script type="text/javascript" src="{% static 'js/healthcoach/nunjuckshelper.js' %}"></script>
  <script type="text/javascript" src="{% static 'js/healthcoach/formhelper.js' %}"></script>
  <script type="text/javascript" src="{% static 'js/healthcoach/paginatorhelper.js' %}"></script>
  <script type="text/javascript" src="{% static 'js/healthcoach/ajaxhelper.js' %}"></script>
  <script type="text/javascript" src="{% static 'js/healthcoach/toastrhelper.js' %}"></script>
  {# Catálogo de traducciones de django #}
  <script type="text/javascript" src="{% url 'javascript-catalog' %}"></script>
  {# Plantillas nunjucks #}
  <script type="text/javascript" src="{% static 'js/templates/profile.js' %}"></script>
  {# Javascript para la vista #}
  <script type="text/javascript" src="{% static 'js/healthcoach/profile.js' %}"></script>
{% endblock extra_body %}

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

{% block breadcrumb_links %}
  <li class="breadcrumb-item"><a href="{% url "dashboard" %}">{% trans "Inicio" %}</a></li>
  <li id="breadcrumb-patient-link" class="breadcrumb-item"></li>
  <li class="breadcrumb-item active">{% trans "Perfil" %}</li>
{% endblock breadcrumb_links %}

{% block content %}
  <div class="row">
    <div class="col-lg-3 col-xlg-3 col-md-4">
      <div id="patient-data-container" class="card"></div>
    </div>
    <div class="col-lg-9 col-xlg-9 col-md-8">
      <div class="card">
        <ul class="nav nav-tabs profile-tab" role="tablist">
          <li class="nav-item"> <a class="nav-link active" data-toggle="tab" href="#profile-data-tab" role="tab">{% trans "Datos" %}</a> </li>
          <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#profile-user-tab" role="tab">{% trans "Usuario" %}</a> </li>
        </ul>
        <div class="tab-content">
          <div class="tab-pane active" id="profile-data-tab" role="tabpanel">
            <div class="card-body">
              <div class="card">
                <div class="card-header text-center py-3">
                  <h5 class="mb-0">{% trans "Actualizar datos del paciente" %}</h5>
                </div>
                <div class="card-body">
                  <div id="patient-form-container"></div>
                </div>
                <div class="card-footer text-center">
                  <button type="submit" form="patient-form" class="btn btn-primary">{% trans "Actualizar datos"  %}</button>
                </div>
              </div>
              <div class="card">
                <div class="card-footer text-center border-top-0">
                  <button id="patient-delete-button" class="btn btn-danger" data-toggle="modal" data-target="#patient-delete-confirmation-modal">{% trans "Borrar paciente"  %}</button>
                </div>
              </div>
            </div>
          </div>
          <div class="tab-pane" id="profile-user-tab" role="tabpanel">
            <div class="card-body">
              <div id="patient-user-tab-content-container"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>


  {# ============================================================== #}
  {# Modals #}
  {# ============================================================== #}

  <div class="modal fade" id="patient-delete-confirmation-modal" tabindex="-1" role="dialog" aria-labelledby="patient-delete-confirmation-modal-title" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header bg-danger">
          <h4 id="patient-delete-confirmation-modal-title" class="modal-title text-white">{% trans "Borrar paciente" %}</h4>
          <button type="button" class="close" data-dismiss="modal" aria-label="{% trans "Cerrar" %}">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <div class="alert alert-danger">
            {% trans "¿Estás seguro de que deseas borrar al paciente? Esta operación no puede deshacerse." %}
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">{% trans "Cerrar" %}</button>
          <button type="button" id="patient-delete-confirmation-modal-button" class="btn btn-danger">{% trans "Borrar" %}</button>
        </div>
      </div>
    </div>
  </div>

  <div class="modal fade" id="user-create-confirmation-modal" tabindex="-1" role="dialog" aria-labelledby="user-create-confirmation-modal-title" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header bg-info">
          <h4 id="user-create-confirmation-modal-title" class="modal-title text-white">{% trans "Crear usuario al paciente" %}</h4>
          <button type="button" class="close" data-dismiss="modal" aria-label="{% trans "Cerrar" %}">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <div class="alert alert-info">
            {% trans "¿Estás seguro de que deseas crear un usuario asociado al paciente? Esta operación no puede deshacerse." %}
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">{% trans "Cerrar" %}</button>
          <button type="button" id="user-create-confirmation-modal-button" class="btn btn-info">{% trans "Crear" %}</button>
        </div>
      </div>
    </div>
  </div>

  <div class="modal fade" id="user-password-reset-confirmation-modal" tabindex="-1" role="dialog" aria-labelledby="user-password-reset-confirmation-modal-title" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header bg-info">
          <h4 id="user-password-reset-confirmation-modal-title" class="modal-title text-white">{% trans "Cambiar contraseña al usuario" %}</h4>
          <button type="button" class="close" data-dismiss="modal" aria-label="{% trans "Cerrar" %}">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <div class="alert alert-info">
            {% trans "¿Estás seguro de que deseas generar una nueva contraseña al usuario asociado al paciente? Esta operación no puede deshacerse." %}
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">{% trans "Cerrar" %}</button>
          <button type="button" id="user-password-reset-confirmation-modal-button" class="btn btn-info">{% trans "Generar contraseña" %}</button>
        </div>
      </div>
    </div>
  </div>
{% endblock %}