{% extends "base.html" %}
{% block header %}
  {{ super() }}
{% endblock header %}

{% block content %}
  {% include "partials/navbar.html" %}

  <div class="container">
    <div>
      <h1>देखभालकर्ता जोड़ें</h1>
    </div>
    {% with messages = get_flashed_messages() %}
      {% if messages %}
        <ul class=flashes>
          {% for message in messages %}
            <li>{{ message }}</li>
          {% endfor %}
        </ul>
      {% endif %}
    {% endwith %}

    <form action="/add_users_and_upload_consent" method="POST" enctype="multipart/form-data" name="partners">
      <div class="input-group">
        <span class="input-group-addon" id="basic-addon6">अनुभव का प्रकार</span>
        <select class="form-control" id="experience_type" name="experience_type">
          {% for experience_type in experience_types %}
            <option value="{{ experience_type[0] }}">{{experience_type[1]}}</option>
          {% endfor %}
        </select>
      </div>
      <div class="input-group">
        <span class="input-group-addon" id="basic-addon3">फ़ोन नंबर</span>
        <textarea class="form-control custom-control" rows="6" style="resize:none"
                  name="phones" id="phones" aria-describedby="basic-addon5"></textarea>
      </div>
      <div class="input-group">
        <span class="input-group-addon" id="basic-addon6">समय श्रेणी</span>
        <select class="form-control" id="timeranges" name="timeranges">
          {% for timerange in timeranges %}
            <option value="{{ timerange[0] }}">{{timerange[1]}}</option>
          {% endfor %}
        </select>
      </div>
      <div class="input-group">
        <span class="input-group-addon" id="basic-addon7">ब्लॉक</span>
        {% if blocks %}
          <select class="form-control" id="blocks" name="blocks">
            <option></option>
            {% for block in blocks %}
              <option value="{{ block }}">{{ block }}</option>
            {% endfor %}
          </select>
        {% else %}
          <p class="form-control">No blocks available.</p>
        {% endif %}
      </div>
      <div class="input-group" hidden>
        <span class="input-group-addon" id="basic-addon8">कार्यक्रम</span>
        <select class="form-control" id="program" name="program">
          {% for program in programs %}
            <option value="{{ program[0] }}">{{ program[1] }}</option>
          {% endfor %}
        </select>
      </div>

      <hr>

      <div>
        <h2>सहमति अपलोड करें (वैकल्पिक)</h2>
      </div>

      <div class="input-group">
        <span class="input-group-addon">सहमति का नाम</span>
        <input type="text" class="form-control" name="consent_name">
      </div>

      <div class="input-group">
        <span class="input-group-addon">फोटो</span>
        <input type="file" class="form-control" name="photo" accept="image/*">
      </div>
      <div>
        <button type="submit" class="btn btn-success">जमा करे</button>
      </div>
    </form>
  </div>

  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
  <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
  <script>
    jQuery(document).ready(function($) {
      $('#blocks').select2({
        placeholder: "ब्लॉक खोजें...",
        allowClear: true
      });
    });
  </script>
{% endblock content %}