{% extends 'core/base.html' %}
{% load static %}
{% load widget_tweaks %}
{% block title %}
  Medwings | Take a measurement
{% endblock title %}

{% block content %}
  <div class="flex flex-col justify-center items-center gap-6 sm:gap-12 py-4 mx-4 max-w-xl">
    <h1>Record your health status</h1>
    <div class="flex flex-col justify-center items-center gap-2 call-to-action-box">
      <div class="flex justify-center items-center gap-4">
        <img class="max-h-24 max-w-24 drop-shadow-lg saturate-50" src="{% static 'medwings/images/devices/withings-bpm-core.webp' %}" alt="A Withings BPM core.">
        <img class="max-h-24 max-w-24 drop-shadow-lg saturate-50" src="{% static 'medwings/images/devices/withings-thermo.webp' %}" alt="A Withings Thermo.">
        <img class="max-h-24 max-w-24 drop-shadow-lg saturate-50" src="{% static 'medwings/images/devices/withings-scanwatch.webp' %}" alt="A Withings Scanwatch.">
      </div>
      <p class="text-center sm:text-start font-semibold text-lg">Before you begin, please have your Withings devices ready for taking measurements.</p>
    </div>
    <form method="post">
      {% csrf_token %}
      <fieldset class="flex flex-col gap-4 items-center">
        <legend>To get started, please answer the following question:</legend>

        {% if respiration_score_form.non_field_errors %}
          <div class="flex flex-col gap-2 status-message error">
            {% for error in respiration_score_form.non_field_errors %}
              <p class="error">{{ error }}</p>
            {% endfor %}
          </div>
        {% endif %}


        <div class="flex flex-col sm:flex-row gap-x-2">
          <label class="font-semibold" for="{{ respiration_score_form.value_severity.id_for_label }}">
            Are you experiencing any shortness of breath?
          </label>
          {% render_field respiration_score_form.value_severity|add_error_class:"error" %}
        </div>
        {% if respiration_score_form.value_severity.errors %}
          <div class="flex flex-col gap-2 status-message error">
            {% for error in respiration_score_form.value_severity.errors %}
              <p class="error">{{ error }}</p>
            {% endfor %}
          </div>
        {% endif %}

        <button class="btn" type="submit">Continue</button>
      </fieldset>
    </form>
  </div>
{% endblock content %}
