{% extends "base.html" %}
{% load static %}

{% block additionnal_css %}
<link rel="stylesheet" href="{% static 'css/datatables/datatables.min.css' %}">
<link rel="stylesheet" href="{% static 'css/admin/manage_attached.css' %}">
<link rel="stylesheet" href="{% static 'jquery-ui-1.12.1/jquery-ui.min.css' %}">

{% endblock %}

{% block additionnal_scripts %}
  <script type="text/javascript" src="{% static 'jquery-ui-1.12.1/jquery-ui.min.js' %}"></script>
  <script type="text/javascript" src="{% static 'js/datatables/datatables.min.js' %}"></script>
{% endblock %}

{% block content %}
<div id="template" style="display:None;">
  <div id="confirmModal">
    <h3>Le binôme est sur le point d'être créé</h3>
    <br/>
    <p>Voulez-vous vraiment créer le binôme avec comme titulaire <b><span id="parentName"></span></b> et comme suppléant <b><span id="childName"></span></b>
    <p>Êtes-vous sur de vouloir continuer ?</p>
    <hr/>
  </div>
</div>
<div class="page_body">
    <div id="back_to_admin_index">
        <button type="button" class="btn--danger"><i class="fas fa-arrow-left"></i>&nbsp; Retour</button>
    </div>
    <div class="login_area">
        {% include "common/conn_admin.html" %}
    </div>
    <div class="header txtcenter">
        <h1>Gestion des Binômes</h1>
    </div>

    <div class="page_content">
        <div class="tiles_container">
            <div class="tile">
              <div class="search_member_form_area" id="search_member_form_area">
                  <h4>Rechercher le.a coopérateur.ice titulaire</h4>
                  <form autocomplete="off" id="search_member_form" class="search_member_form" action="javascript:;" method="post">
                    <input name="searchParent" type="text" id="search_member_input" value="" placeholder="Nom ou numéro du coop..." required>
                    <img id="spinner1" class="spinner" src="{% static 'img/Loading_2.gif' %}" alt="loading" style="display:none;">
                  </form>
              </div>
              <div id="parentInfo" style="display:none;">

                <div class="tile_title">
                  <i class="fas fa-user tile_icon"></i>
                  <span class="member_info member_name"></span>
                  <br>
                  <span>Email : </span>
                  <span class="member_info member_email"></span>
                </div>
                <div class="tile_content">
                  <div class="member_status_text_container">
                    <span>Statut : </span>
                    <span class="member_info member_status"></span>
                    <br>
                    <span>Nombre de rattrapage(s) : </span>
                    <span class="member_makeups_to_do member_info"></span>
                  </div>
                  <div class="member_shift_name_area">
                    <span>Créneau : </span>
                    <span class="member_shift_name member_info"></span>
                  </div>
                </div>

              </div>
            </div>
            <div class="create_pair_button">
              <button id="createPair" type="button" name="button" disabled>Créer le binôme</button>
            </div>
            <div class="tile">
              <div class="search_member_form_area" id="search_member_form_area">
                  <h4>Rechercher le.a coopérateur.ice suppléant.e</h4>
                  <form autocomplete="off" id="search_member_form_child" class="search_member_form" action="javascript:;" method="post">
                    <input name="searchChild" type="text" id="search_child_input" value="" placeholder="Nom ou numéro du coop..." required>
                    <img id="spinner2" class="spinner" src="{% static 'img/Loading_2.gif' %}" alt="loading" style="display:none;">
                  </form>
              </div>
              <div id="childInfo" style="display:none;">

                <div class="tile_title">
                  <i class="fas fa-user tile_icon"></i>
                  <span class="member_info member_name"></span>
                  <br>
                  <span>Email : </span>
                  <span class="member_info member_email"></span>
                </div>
                <div class="tile_content">
                  <div class="member_status_text_container">
                    <span>Statut : </span>
                    <span class="member_info member_status"></span>
                    <br>
                    <span>Nombre de rattrapage(s) : </span>
                    <span class="member_makeups_to_do member_info"></span>
                  </div>
                  <div class="member_shift_name_area">
                    <span>Créneau : </span>
                    <span class="member_shift_name member_info"></span>
                  </div>
                </div>

              </div>
            </div>
          </div>
    </div>
</div>

<script src='{% static "js/all_common.js" %}?v=1651853225'></script>
<script src='{% static "js/admin/manage_attached.js" %}?v=1651853225'></script>
{% endblock %}