<!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>
    Gallery
  </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 pb-0 px-3">
              <div class="d-flex justify-content-between">
                <h6 class="mb-0">Upload new Gallery Images</h6>
                <button type="submit" form="article" class="btn btn-sm btn-primary">Save Images</button>
              </div>
            </div>
            <div class="card-body pt-4 p-3">
              <form novalidate method="post" id="article" enctype="multipart/form-data">
                {{form.csrf_token}}
                <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', accept=".png, .jpg, .jpeg, .gif")}}

                </div>
              </form>
            </div>
          </div>
        </div>
        <div class="col-md-12">
          <div class="card">
            <div class="card-header pb-0 px-3">
              <h6 class="mb-0">All Images</h6>
            </div>
            <div class="card-body pt-4 p-3">
              <div class="row g-3">
                {% for image in images %}
                <div class="col-md col-lg-3">
                  <div class="card bg-dark text-white">
                    <img src="{{url_for('static', filename='files')}}/{{image.image}}" class="card-img"
                      alt="image {{image.id}}">
                    <div class="card-img-overlay">
                      <div class="end-0 float-end bottom-0">
                        <div class="d-flex">
                          {%if image.active %}
                          <a href="{{url_for('hide_gallery', id=image.id, status=image.active)}}" class="btn btn-sm p-1 me-1 btn-info" style="font-size:9px;">Hide</a>
                          {%else%}
                          <a href="{{url_for('hide_gallery', id=image.id, status=image.active)}}" class="btn btn-sm p-1 me-1 btn-success" style="font-size:9px;">Show</a>
                          {% endif %}
                          <a href="{{url_for('delete_gallery', id=image.id)}}" class="btn btn-sm p-1 me-1 btn-danger" style="font-size:9px;">Remove</a>
                        </div>
                      </div>
                  
                    </div>
                  </div>
                </div>
                {% endfor %}
              </div>
            </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);
    }
  </script>
</body>

</html>