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

{% block link %}
<link href="{% static 'assets/bundles/lightgallery/dist/css/lightgallery.css' %}" rel="stylesheet">
{% endblock link %}

{% block content %}
<section class="section">
    <div class="section-body">
      <div class="row clearfix">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 col-12">
          <div class="card">
            <div class="card-header">
              <div class="row">
                  <h4>{{ campaign_name }} Gallery</h4>                
                  <div class="dropdown">
                    <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                     Action
                    </button>
                    <div class="dropdown-menu text-center" aria-labelledby="dropdownMenuButton">
                      <div class="text-center col-12">
                        <form method="get" action="{% url 'schedule-campaign' %}">
                          <input name="campaign_name" value="{{campaign_name}}" type="hidden">
                          <button class="btn btn-sm btn-primary col-12" type="submit">Schedule Campaign</button>
                        </form>
                      </div>
                      <div class="dropdown-divider"></div>
                      <div class="text-center col-12">
                        <form method="get" action="{% url 'add-upload' %}">
                          <input name="campaign_name" value="{{campaign_name}}" type="hidden">
                          <button class="btn btn-sm btn-success col-12" type="submit">Add Media</button>
                        </form>
                      </div>
                      <div class="dropdown-divider"></div>
                      <div class="text-center col-12">
                        <form method="get" action="{% url 'delete-media' %}">
                          <input name="campaign_name" value="{{campaign_name}}" type="hidden">
                          <button class="btn btn-sm btn-warning col-12" type="submit">Delete Media</button>
                        </form>
                      </div>
                      <div class="dropdown-divider"></div>
                      <div class="text-center col-12">
                        <form method="post" action="{% url 'delete-campaign' %}">
                          {% csrf_token %}
                          <input name="campaign_name" value="{{campaign_name}}" type="hidden">
                          <button class="btn btn-sm btn-danger col-12" type="submit">Delete Campaign</button>
                        </form>
                      </div>
                    </div>
                  </div>
              </div>
            </div>
            <div class="card-body">
              <div id="aniimated-thumbnials" class="list-unstyled row clearfix">
                {% for content in campaign %}
                <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 text-center">
                  {% if content.media_type == 'image' %}
                  <a href="/media/{{ content.file }}" data-sub-html="{{ content.campaign_name }}">
                    <img class="img-responsive thumbnail" src="/media/{{ content.file }}" alt="">
                  </a>

                  {% else %}
                  <a href="/media/{{ content.file }}" data-sub-html="{{ content.campaign_name }}">
                    <video class="img-responsive thumbnail" controls="controls" style="padding-top: 0% !important; height:155px; width: 230px;">
                      <source src="/media/{{ content.file }}" type="video/mp4" />
                    </video>
                  </a>
                  {% endif %}
                </div>
                {% endfor %}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <div class="settingSidebar">
    <a href="javascript:void(0)" class="settingPanelToggle"> <i class="fa fa-spin fa-cog"></i>
    </a>
    <div class="settingSidebar-body ps-container ps-theme-default">
      <div class=" fade show active">
        <div class="setting-panel-header">Setting Panel
        </div>
        <div class="p-15 border-bottom">
          <h6 class="font-medium m-b-10">Select Layout</h6>
          <div class="selectgroup layout-color w-50">
            <label class="selectgroup-item">
              <input type="radio" name="value" value="1" class="selectgroup-input-radio select-layout" checked>
              <span class="selectgroup-button">Light</span>
            </label>
            <label class="selectgroup-item">
              <input type="radio" name="value" value="2" class="selectgroup-input-radio select-layout">
              <span class="selectgroup-button">Dark</span>
            </label>
          </div>
        </div>
        <div class="p-15 border-bottom">
          <h6 class="font-medium m-b-10">Sidebar Color</h6>
          <div class="selectgroup selectgroup-pills sidebar-color">
            <label class="selectgroup-item">
              <input type="radio" name="icon-input" value="1" class="selectgroup-input select-sidebar">
              <span class="selectgroup-button selectgroup-button-icon" data-toggle="tooltip"
                data-original-title="Light Sidebar"><i class="fas fa-sun"></i></span>
            </label>
            <label class="selectgroup-item">
              <input type="radio" name="icon-input" value="2" class="selectgroup-input select-sidebar" checked>
              <span class="selectgroup-button selectgroup-button-icon" data-toggle="tooltip"
                data-original-title="Dark Sidebar"><i class="fas fa-moon"></i></span>
            </label>
          </div>
        </div>
        <div class="p-15 border-bottom">
          <h6 class="font-medium m-b-10">Color Theme</h6>
          <div class="theme-setting-options">
            <ul class="choose-theme list-unstyled mb-0">
              <li title="white" class="active">
                <div class="white"></div>
              </li>
              <li title="cyan">
                <div class="cyan"></div>
              </li>
              <li title="black">
                <div class="black"></div>
              </li>
              <li title="purple">
                <div class="purple"></div>
              </li>
              <li title="orange">
                <div class="orange"></div>
              </li>
              <li title="green">
                <div class="green"></div>
              </li>
              <li title="red">
                <div class="red"></div>
              </li>
            </ul>
          </div>
        </div>
        <div class="p-15 border-bottom">
          <div class="theme-setting-options">
            <label class="m-b-0">
              <input type="checkbox" name="custom-switch-checkbox" class="custom-switch-input"
                id="mini_sidebar_setting">
              <span class="custom-switch-indicator"></span>
              <span class="control-label p-l-10">Mini Sidebar</span>
            </label>
          </div>
        </div>
        <div class="p-15 border-bottom">
          <div class="theme-setting-options">
            <label class="m-b-0">
              <input type="checkbox" name="custom-switch-checkbox" class="custom-switch-input"
                id="sticky_header_setting">
              <span class="custom-switch-indicator"></span>
              <span class="control-label p-l-10">Sticky Header</span>
            </label>
          </div>
        </div>
        <div class="mt-4 mb-4 p-3 align-center rt-sidebar-last-ele">
          <a href="#" class="btn btn-icon icon-left btn-primary btn-restore-theme">
            <i class="fas fa-undo"></i> Restore Default
          </a>
        </div>
      </div>
    </div>
  </div>
{% endblock content%}

{% block script %}
<script src="{% static 'assets/bundles/lightgallery/dist/js/lightgallery-all.js' %}"></script>
<!-- <script src="{% static 'assets/js/page/light-gallery.js' %}"></script> -->
{% endblock script %}