{% load static %}
<style>
    .slideshow-container {
      max-width: 585px;
      position: relative;
      margin: auto;
    }

    .mySlides {
      display: none;
    }
    .prev, .next {
      cursor: pointer;
      position: absolute;
      top: 20px;
      width: auto;
      margin-top: -22px;
      padding: 16px;
      color: white;
      font-weight: bold;
      font-size: 18px;
      transition: 0.6s ease;
      border-radius: 0 3px 3px 0;
      user-select: none;
      z-index: 100;
    }
    .next {
      right: 0;
      border-radius: 3px 0 0 3px;
    }
    .prev:hover, .next:hover {
      background-color: rgba(0,0,0,0.8);
    }

    .dot {
      cursor: pointer;
      height: 15px;
      width: 15px;
      margin: 0 2px;
      background-color: #bbb;
      border-radius: 50%;
      display: inline-block;
      transition: background-color 0.6s ease;
    }

    .active, .dot:hover {
      background-color: #505050;
    }
    .fade {
      animation-name: fade;
      animation-duration: 1.5s;
    }
    @keyframes fade {
      from {opacity: .4}
      to {opacity: 1}
    }

    .title {
        color: white;
        font-weight: bold;
        font-size: 18pt;
        text-align: center;
        //text-transform: uppercase;
        font-family: 'Source Sans Pro', sans-serif;
        display: table;
        margin: 0px auto;
        margin-bottom: 5px;
    }
</style>
<script>
let slideIndex = 2;
let timeout = null;
(function() {
   // your page initialization code here
   // the DOM will be available here
   //currentSlide(2);
})();



// Next/previous controls
function plusSlides(n) {
  showSlides(slideIndex += n);
  clearTimeout(timeout);
  timeout = setTimeout(resetSlides, 17000);
}
function resetSlides(){
    console.log("pass_reset slide");
    showSlides(slideIndex = 2);
}

// Thumbnail image controls
function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  let i;
  let slides = document.getElementsByClassName("mySlides");
  let dots = document.getElementsByClassName("dot");
  if (n > slides.length) {slideIndex = 1}
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";
  dots[slideIndex-1].className += " active";
}
</script>
<link rel="stylesheet" href="{% static 'mycaldav/style.css' %}">

  <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
  <a class="next" onclick="plusSlides(1)">&#10095;</a>
<div class="ifram_main_div slideshow-container" style="">
    <div class="mySlides fade">
        <span class="title" style=""><a href="team_pdf" target="_blank">Équipages</a></span>
       <span style="margin: 0 auto;display: table; margin-bottom: 13px"> <b >{{ yesterday }}</b></span>
        {% if latest_task_list %}
            <table>
                {% for task in latest_task_list %}
                {% if task.str_start_date == yesterday %}
                    <tr style="" title="{{task.desc}}">
                        <td style="vertical-align: top;font-weight: bold;" class="td_key" >
                            {{task.key}}
                            {% if task.team_transfert %}
                            <svg class="team_svg_icon"  x="0px" y="0px" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 512 512">
                                 <use class="team_svg_icon" xlink:href="{% static 'mycaldav/images/team_trans_2.svg' %}#icon"></use>
                             </svg>
                            {% endif %}
                            {% if task.team_manif %}
                            &nbsp;M
                            {% endif %}
                        </td>
                        <td style="{% if task.done %}text-decoration:line-through{% endif %}">
                            <span style="{% if task.team_1_chef %}color: yellow !important;{% endif %}; width: 170px;display: inline-block">{{ task.team_1 }}</span>&nbsp;
                            <span style="{% if task.team_2_chef %}color: yellow !important;{% endif %};width: 170px;display: inline-block">{{ task.team_2 }}</span>
                        </td>
                    </tr>
                {% endif %}
                {% endfor %}
                <tr><td>&nbsp;</td></tr>
                <tr>
                    <td style="border-top: 1px dashed white;font-weight: bold;padding: 5px; text-align: center;" colspan="2">Nuit</td>
                </tr>
                {% for task in night_task_list %}
                {% if task.str_start_date == yesterday %}
                   <tr style=""><td style="font-weight: bold;vertical-align: top;{% if task.team_transfert %}background-color: orange;{% endif %}" class="td_key" >
                       {{task.key}}
                       {% if task.team_transfert %}
                            <svg class="team_svg_icon"  x="0px" y="0px" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 512 512">
                                 <use class="team_svg_icon" xlink:href="{% static 'mycaldav/images/team_trans_2.svg' %}#icon"></use>
                             </svg>
                            {% endif %}
                            {% if task.team_manif %}
                            M
                            {% endif %}
                   </td>
                        <td style="{% if task.done %}text-decoration:line-through{% endif %}">
                            <span style="{% if task.team_1_chef %}color: yellow !important;{% endif %};width: 170px;display: inline-block">{{ task.team_1 }}</span>&nbsp;
                            <span style="{% if task.team_2_chef %}color: yellow !important;{% endif %};width: 170px;display: inline-block">{{ task.team_2 }}</span>
                        </td>
                   </tr>
                {% endif %}
                {% endfor %}
            </table>
        {% else %}
            <p>Aucune information d'équipage</p>
        {% endif %}
    </div>
    <div class="mySlides fade" style="display: block;">
        <span class="title" style=""><a href="team_pdf" target="_blank">Équipages</a></span>
       <span style="margin: 0 auto;display: table; margin-bottom: 13px"> <b >{{ today }}</b></span>
        {% if latest_task_list %}
            <table>
                {% for task in latest_task_list %}
                {% if task.str_start_date == today %}
                    <tr style="" title="{{task.desc}}">
                        <td style="vertical-align: top;font-weight: bold;" class="td_key" >
                            {{task.key}}
                            {% if task.team_transfert %}
                            <svg class="team_svg_icon"  x="0px" y="0px" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 512 512">
                                 <use class="team_svg_icon" xlink:href="{% static 'mycaldav/images/team_trans_2.svg' %}#icon"></use>
                             </svg>
                            {% endif %}
                            {% if task.team_manif %}
                            &nbsp;M
                            {% endif %}
                        </td>
                        <td style="{% if task.done %}text-decoration:line-through{% endif %}">
                            <span style="{% if task.team_1_chef %}color: yellow !important;{% endif %}; width: 170px;display: inline-block">{{ task.team_1 }}</span>&nbsp;
                            <span style="{% if task.team_2_chef %}color: yellow !important;{% endif %};width: 170px;display: inline-block">{{ task.team_2 }}</span>
                        </td>
                    </tr>
                {% endif %}
                {% endfor %}
                <tr><td>&nbsp;</td></tr>
                <tr>
                    <td style="border-top: 1px dashed white;font-weight: bold;padding: 5px; text-align: center;" colspan="2">Nuit</td>
                </tr>
                {% for task in night_task_list %}
                {% if task.str_start_date == today %}
                   <tr style=""><td style="font-weight: bold;vertical-align: top;{% if task.team_transfert %}background-color: orange;{% endif %}" class="td_key" >
                       {{task.key}}
                       {% if task.team_transfert %}
                            <svg class="team_svg_icon"  x="0px" y="0px" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 512 512">
                                 <use class="team_svg_icon" xlink:href="{% static 'mycaldav/images/team_trans_2.svg' %}#icon"></use>
                             </svg>
                            {% endif %}
                            {% if task.team_manif %}
                           M
                            {% endif %}
                   </td>
                        <td style="{% if task.done %}text-decoration:line-through{% endif %}">
                            <span style="{% if task.team_1_chef %}color: yellow !important;{% endif %};width: 170px;display: inline-block">{{ task.team_1 }}</span>&nbsp;
                            <span style="{% if task.team_2_chef %}color: yellow !important;{% endif %};width: 170px;display: inline-block">{{ task.team_2 }}</span>
                        </td>
                   </tr>
                {% endif %}
                {% endfor %}
            </table>
        {% else %}
            <p>Aucune information d'équipage</p>
        {% endif %}

    </div>

    <div class="mySlides fade">
        <span class="title" style=""><a href="team_pdf" target="_blank">Équipages</a></span>
       <span style="margin: 0 auto;display: table; margin-bottom: 13px"> <b >{{ tomorow }}</b></span>
        {% if latest_task_list %}
            <table>
                {% for task in latest_task_list %}
                {% if task.str_start_date == tomorow %}
                    <tr style="" title="{{task.desc}}">
                        <td style="vertical-align: top;font-weight: bold;" class="td_key" >
                            {{task.key}}
                            {% if task.team_transfert %}
                            <svg class="team_svg_icon"  x="0px" y="0px" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 512 512">
                                 <use class="team_svg_icon" xlink:href="{% static 'mycaldav/images/team_trans_2.svg' %}#icon"></use>
                             </svg>
                            {% endif %}
                            {% if task.team_manif %}
                            &nbsp;M
                            {% endif %}
                        </td>
                        <td style="{% if task.done %}text-decoration:line-through{% endif %}">
                            <span style="{% if task.team_1_chef %}color: yellow !important;{% endif %}; width: 170px;display: inline-block">{{ task.team_1 }}</span>&nbsp;
                            <span style="{% if task.team_2_chef %}color: yellow !important;{% endif %};width: 170px;display: inline-block">{{ task.team_2 }}</span>
                        </td>
                    </tr>
                {% endif %}
                {% endfor %}
                <tr><td>&nbsp;</td></tr>
                <tr>
                    <td style="border-top: 1px dashed white;font-weight: bold;padding: 5px; text-align: center;" colspan="2">Nuit</td>
                </tr>
                {% for task in night_task_list %}
                {% if task.str_start_date == tomorow %}
                   <tr style=""><td style="font-weight: bold;vertical-align: top;{% if task.team_transfert %}background-color: orange;{% endif %}" class="td_key" >
                       {{task.key}}
                       {% if task.team_transfert %}
                            <svg class="team_svg_icon"  x="0px" y="0px" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 512 512">
                                 <use class="team_svg_icon" xlink:href="{% static 'mycaldav/images/team_trans_2.svg' %}#icon"></use>
                             </svg>
                            {% endif %}
                            {% if task.team_manif %}
                            M
                            {% endif %}
                   </td>
                        <td style="{% if task.done %}text-decoration:line-through{% endif %}">
                            <span style="{% if task.team_1_chef %}color: yellow !important;{% endif %};width: 170px;display: inline-block">{{ task.team_1 }}</span>&nbsp;
                            <span style="{% if task.team_2_chef %}color: yellow !important;{% endif %};width: 170px;display: inline-block">{{ task.team_2 }}</span>
                        </td>
                   </tr>
                {% endif %}
                {% endfor %}
            </table>
        {% else %}
            <p>Aucune information d'équipage</p>
        {% endif %}
    </div>

</div>
<div style="text-align:center; margin-top: 55px">
  <span class="dot" onclick="currentSlide(1)"></span>
  <span class="dot active" onclick="currentSlide(2)"></span>
  <span class="dot" onclick="currentSlide(3)"></span>
</div>