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

{% block extra_head %}
{% 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 '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/plugins/markdown-it/markdown-it-8.4.2.min.js' %}"></script>
  {# Catálogo de traducciones de django #}
  <script type="text/javascript" src="{% url 'javascript-catalog' %}"></script>
  {# Helpers #}
  <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>
  {# Plantillas nunjucks #}
  <script type="text/javascript" src="{% static 'js/templates/supplement.js' %}"></script>
  {# Javascript para la vista #}
  <script type="text/javascript" src="{% static 'js/healthcoach/supplement.js' %}"></script>
{% endblock extra_body %}

{% block title %}{% trans "Suplementos" %}{% 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 "Suplementos" %}</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 id="not-last-questionnaire-advice-container"></div>
      <div class="card">
        <div class="card-body">
          <div id="supplements-list-container" class="mt-4"></div>
        </div>
        <div class="card-footer">
          <div id="supplements-pdf-link-container"></div>
        </div>
      </div>
    </div>
  </div>
{% endblock %}