{% extends "admin_panel/base_page.html" %}
{% load static %}

{% block title %}
<title>Gallery</title>
{% endblock %}

{% block head %}
    <link href="{% static 'assets/admin_panel/vendor/datatables/css/jquery.dataTables.min.css' %}" rel="stylesheet">
{% endblock %}

{% block content %}
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h4 class="card-title">Gallery</h4>
                <a href="{% url 'add_new_gallery' %}" class="btn btn-rounded btn-secondary">
                    <span class="btn-icon-left text-primary">
                        <i class="fa fa-plus color-primary"></i>
                    </span>Add new image
                </a>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table id="gallery" class="display" style="min-width: 845px">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Icon</th>
                                <th>Title</th>
                                <th>Status</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% if gallery_images %}
                                {% for gallery_image in gallery_images %}
                                    <tr>
                                        <td>{{ forloop.counter }}</td>
                                        <td><img src='{{ gallery_image.icon.url }}' height="100" width="100" style="border-radius: 25px" alt="depimg" /></td>
                                        <td>{{ gallery_image.title }}</td>
                                        <td>
                                            {% if gallery_image.status %}
                                                <span class="badge badge-success">Active</span>
                                            {% else %}
                                                <span class="badge badge-danger">In-Active</span>
                                            {% endif %}
                                        </td>
                                        <td>
                                            <a href="{% url 'gallery_edit' gallery_image.id %}" type="button" class="btn btn-secondary">Edit <span
                                                    class="btn-icon-right"><i class="fa fa-edit"></i></span>
                                            </a>
                                            <a href="javascript:void(0)" data-gallery-id="{{ gallery_image.id }}" data-toggle="modal" data-target="#delete_gallery" class="btn btn-danger delete-gallery">Delete <span
                                                    class="btn-icon-right"><i class="fa fa-trash-o"></i></span>
                                            </a>
                                        </td>
                                    </tr>
                                {%  endfor %}
                            {% endif %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="delete_gallery">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Delete Confirmation</h5>
                <button type="button" class="close" data-dismiss="modal"><span>&times;</span>
                </button>
            </div>
            <div class="modal-body">Are you sure you want to delete this Image?</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <a href="#" id="confirm-delete" class="btn btn-primary">Delete</a>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block script %}
    <script src="{% static 'assets/js/jquery.min.js' %}"></script>
    <script src="{% static 'assets/admin_panel/vendor/datatables/js/jquery.dataTables.min.js' %}"></script>
    <script src="{% static 'assets/admin_panel/js/plugins-init/datatables.init.js' %}"></script>
    <script>
        var table = $('#gallery').DataTable({
            ordering: false
        });
        $(document).ready(function(){
            $('#gallery').on('click','.delete-gallery', function(){
                let gallery_id = $(this).data("gallery-id");
                let url = "gallery_delete/"+gallery_id;
                $("#confirm-delete").attr({"href": url});
            });
        });
    </script>
{% endblock %}