{% 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="post" action="#">
                                            {% csrf_token %}
                                            <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="#">
                                            {% csrf_token %}
                                            <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 %}
                                <form class="post" action="{% url 'delete-media' %}">
                                    {% csrf_token %}
                                    <div>
                                        <input name="file_name" value="{{content.file}}" type="hidden">
                                        <input name="campaign_name" value="{{content.campaign_name}}" type="hidden">
                                        <button class="btn btn-sm btn-danger" type="submit">Delete</button>
                                    </div>
                                </form>
                            </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 %}