<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>
    Slider
  </title>

  {% include 'admin/includes/imports.top.html' %}
</head>

<body class="g-sidenav-show  bg-gray-100">
  {% include 'admin/includes/part.menu.html' %}
  <main class="main-content position-relative max-height-vh-100 h-100 border-radius-lg ">
    <!-- Navbar -->
    {% include 'admin/includes/part.header.html' %}
    <!-- End Navbar -->
    <div class="container-fluid py-4">
      <div class="row g-1">
        <div class="col-md-12">
          <div class="card">
            <div class="card-header d-flex justify-content-between">
              <h6 class="mb-0">Current Message</h6>
              <button type="button" class="btn btn-sm btn-info" type="button" data-bs-toggle="offcanvas"
                data-bs-target="#add_a_slider" aria-controls="add_a_slider">Change Message and Image</button>
            </div>
            <div class="offcanvas offcanvas-end" data-bs-scroll="true" tabindex="-1" id="add_a_slider"
              aria-labelledby="add_a_sliderLabel">
              <div class="offcanvas-header">
                <h5 class="offcanvas-title" id="add_a_sliderLabel">Change Message and Image
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
              </div>
              <div class="offcanvas-body">
                <div>
                  <form novalidate method="post" id="article" enctype="multipart/form-data">
                    {{form.csrf_token}}
                    <div>
                      {{form.message.label}}
                      {% for error in form.message.errors %}
                      <span class='text-danger text-sm text-gradient'>{{ error }}</span>
                      {% endfor %}
                      {{form.message(class_='form-control')}}

                    </div>
                    <div>
                      {{form.link.label}}
                      {% for error in form.link.errors %}
                      <span class='text-danger text-sm text-gradient'>{{ error }}</span>
                      {% endfor %}
                      {{form.link(class_='form-control')}}

                    </div>
                    <div>
                      {{form.youtube.label}}
                      {% for error in form.youtube.errors %}
                      <span class='text-danger text-sm text-gradient'>{{ error }}</span>
                      {% endfor %}
                      {{form.youtube(class_='form-control')}}

                    </div>
                    <div>
                      {{form.image.label}}
                      {% for error in form.image.errors %}
                      <span class='text-danger text-sm text-gradient'>{{ error }}</span>
                      {% endfor %}
                      {{form.image(class_='form-control')}}

                    </div>
                    <div class="mt-3">
                      <button type="submit" form="article" class="btn btn-sm btn-primary">Save</button>
                    </div>
                  </form>
                </div>
              </div>
            </div>
            <div class="card-body pt-4 p-3">
              <div class="row g-2">
                {% for slider in sliders %}
                <div class="col-md col-lg-4">
                  <div class="card bg-dark text-white">
                    <img src="{{url_for('static', filename='files')}}/{{slider.image}}" class="card-img"
                      alt="Slider {{slider.id}}">
                    <div class="card-img-overlay" style="background-color: rgba(0, 0, 0, 0.6);">
                      <div class="d-flex justify-content-between">
                        <div>
                          {% if slider.youtube %}
                          <a href="#youtubeModal" title="Youtube Video" onclick="changeLink('{{slider.youtube}}')" class="bg-transparent p-0 m-0 border-0" data-bs-toggle="modal"
                            data-bs-target="#youtubeModal">
                            <i class="fa fa-youtube-play text-danger fs-4" aria-hidden="true"></i>
                          </a>
                          {% endif %}
                        </div>
                        <div class="d-flex">
                          {%if slider.active %}
                          <a href="{{url_for('hide_slider', id=slider.id, status=slider.active)}}"
                            class="btn btn-sm p-1 me-1 btn-info" style="font-size:9px;">Hide</a>
                          {%else%}
                          <a href="{{url_for('hide_slider', id=slider.id, status=slider.active)}}"
                            class="btn btn-sm p-1 me-1 btn-success" style="font-size:9px;">Show</a>
                          {% endif %}
                          <a href="{{url_for('delete_slider', id=slider.id)}}" class="btn btn-sm p-1 me-1 btn-danger"
                            style="font-size:9px;">Remove</a>
                        </div>
                      </div>
                      <div class="card-title text-white">
                        {{slider.message}}
                      </div>
                    </div>
                  </div>
                </div>
                {% endfor %}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>


    <div class="modal fade" id="youtubeModal" tabindex="-1" aria-labelledby="youtubeModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content border-0">
          <!-- <div class="modal-header"> -->
          <button type="button"
            class="position-absolute top-0 start-100 translate-middle fs-5 badge rounded-circle btn p-0 btn-danger"
            style="width: 35px !important; height: 35px !important;" data-bs-dismiss="modal">
            <i class="fa fa-times" aria-hidden="true"></i>
          </button>
          <!-- </div> -->
          <!-- <div class="modal-body"> -->
          <iframe id="cartoonVideo" class="w-100" height="400" src="" frameborder="0"
            allowfullscreen></iframe>
          <!-- </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
              <button type="button" class="btn btn-primary">Save changes</button>
            </div> -->
        </div>
      </div>
    </div>
    {% include 'admin/includes/part.footer.html' %}
    </div>
  </main>

  <!--   Core JS Files   -->
  {% include 'admin/includes/imports.bottom.html' %}
  <script>
    var win = navigator.platform.indexOf('Win') > -1;
    if (win && document.querySelector('#sidenav-scrollbar')) {
      var options = {
        damping: '0.5'
      }
      Scrollbar.init(document.querySelector('#sidenav-scrollbar'), options);
    }
    function changeLink(video_id){
      let link = "https://www.youtube.com/embed/"+video_id;
      $('#cartoonVideo').attr('src', link);
    }
  </script>
</body>

</html>