shifts_exchange.html

<div id="shifts_exchange">
    <div id="unsuscribed_content" class="shifts_exchange_page_content">
        <h3>Je suis désinscrit.e, je dois remplir un formulaire pour qu'on me réinscrive à un créneau.</h3>
        <a href="#" target="_blank" class="btn--warning unsuscribed_form_link">
            J'accède au formulaire
        </a>
    </div>
    <div id="suspended_cant_have_delay_content" class="shifts_exchange_page_content">
        <div class="suspended_cant_have_delay_msg"></div>
        <a href="#" target="_blank" class="btn--warning cant_have_delay_form_link">
            J'accède au formulaire
        </a>
    </div>
    <div id="comite_content" class="shifts_exchange_page_content">
        <div class="comite_content_msg"></div>
        <div id="read_only_calendar"></div>
    </div>
    <div id="suspended_content" class="shifts_exchange_page_content">
        <h3>
            J'ai <span class="makeups_nb"></span> rattrapage(s) à effectuer, je dois le(s) sélectionner pour pouvoir refaire mes courses.
            J'ai 6 mois de délai pour le(s) rattraper.
        </h3>
        <h3>
            Si besoin, je peux contacter le Bureau des membres via la rubrique "J'ai une demande" pour expliquer ma situation.
        </h3>
        <button type="button" class="btn--danger select_makeups">
            Je sélectionne mes rattrapages
        </button>
    </div>
    <div id="shifts_exchange_content" class="shifts_exchange_page_content">
        <div id="need_to_select_makeups_message">
            <span class="select_makeups_message_block">
                <i class="fas fa-exclamation-triangle makeups_warning"></i>  
                J'ai <span class="makeups_nb"></span> rattrapage(s) à faire. </span>
            <span class="select_makeups_message_block">Je dois les sélectionner dans le calendrier. </span>
            <span class="select_makeups_message_block">Je ne peux pas échanger de service tant que je n'ai pas choisi mes rattrapages. </span>
        </div>
        <div id="calendar_top_info">
            <div id="partner_shifts_list">
                <h4>Liste de mes services :</h4>
                <div class="loading-incoming-shifts">
                    <i class="fas fa-spinner fa-spin fa-lg"></i>
                </div>
                <div id="shifts_list"></div>
            </div>
            <div id="calendar_explaination_area"></div>
            <button id="calendar_explaination_button" class="btn--success">Légende du calendrier</button>
        </div>
        <div class="loading-calendar">
            <i class="fas fa-spinner fa-spin fa-2x"></i>
        </div>
        <div id="calendar"></div>
    </div>
</div>