{% include 'web/include_comman/header.html' %}

        <!-- Sidebar -->
        {% include 'web/include_comman/sidebar.html' with active_tab='magazine_category_active'%}
        <!-- End of Sidebar -->

        <!-- Content Wrapper -->
        <div id="content-wrapper" class="d-flex flex-column">

            <!-- Main Content -->
            <div id="content">

                <!-- Topbar -->
                {% include 'web/include_comman/right_top.html' %}
                <!-- End of Topbar -->

                <!-- Begin Page Content -->
                <div class="container-fluid">

                    <!-- Page Heading -->
                    {% comment %} <h1 class="h3 mb-2 text-gray-800">{{title}}</h1> {% endcomment %}
                    <form  method="GET" class="d-none d-sm-inline-block form-inline mr-auto ml-md-3 my-2 my-md-0 mw-100 navbar-search mb-3">
                        <div class="input-group">

                            <input type="text" name="search" value="{{search}}" class="form-control bg-light border-1 small" placeholder="Search for..."

                                aria-label="Search" aria-describedby="basic-addon2">

                            <div class="input-group-append mb-3">

                                <button class="btn btn-primary" type="submit">

                                    <i class="fas fa-search fa-sm"></i>

                                </button>

                            </div>

                        </div>

                    </form>

                    <!-- DataTales Example -->
                    <div class="card shadow mb-4">
                        <div class="card-header py-3">
                            <div class="row">
                                <div class="col-lg-6">
                                    <h6 class="m-0 font-weight-bold text-primary">Magazine Category List</h6>
                                </div>
                                <div class="col-lg-6">
                                    <a href="{% url 'web:add_magazine_category_view' %}" class="btn btn-success btn-sm float-right" role="button">Add New</a>
                                </div>
                            </div>
                        </div>
                        <div class="card-body">
                            {% include 'web/message.html' %}
                            <div class="table-responsive">
                                {% if magazine_categorys %}
                                <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0" >
                                    <thead>
                                        <tr>
                                            <th>S.N.</th>
                                            <th>Category name</th>
                                            <th>Category Color</th>
                                            <th>Category Icons</th>
                                            <th>Action</th>
                                        </tr>
                                    </thead>
                                   
                                    <tbody>
                                        {% for magazine_category in magazine_categorys %}
                                        <tr >
                                            <td class="tableflow">{{forloop.counter}}</td>
                                            <td class="tableflow">{{magazine_category.category_name}}</td>
                                            <td class="tableflow"><span style="background-color:{{magazine_category.magazine_category_color}};color:white;padding:10px;border-radius:30px;">{{magazine_category.magazine_category_color}}</span></td>
                                            <td>
                                                {% if magazine_category.magazine_category_icon %}
                                                <div class="divflow" style="background-color:{{magazine_category.magazine_category_color}};"><img src="{{magazine_category.magazine_category_icon.url}}" style="width:100px;border-radius: 30px;" class="imageflow">
                                                </div>{% endif %}
                                            </td>
                                            <td class="tableflow"><a href="{% url 'web:edit_magazine_category_view' magazine_category.id %}" class="btn-sm btn-info btn-lg active" role="button" aria-pressed="true">Edit</a>
                                                 <a href="{% url 'web:delete_magazine_category_view' magazine_category.id %}" class="btn-sm btn-danger btn-lg active" role="button" aria-pressed="true" onclick="conformBox()">Delete</a></td>
                                            
                                        </tr>
                                        {% endfor %}
                                        
                                      
                                    </tbody>
                                </table>


                                <div class="pagination float-right">
                                    <span class="step-links">
                                        {% if magazine_categorys.has_previous %}
                                            <a href="?page=1">&laquo; first</a>
                                            <a href="?page={{ magazine_categorys.previous_page_number }}">previous</a>
                                        {% endif %}
                                
                                        <span class="current">
                                            Page {{ magazine_categorys.number }} of {{ magazine_categorys.paginator.num_pages }}.
                                        </span>
                                
                                        {% if magazine_categorys.has_next %}
                                            <a href="?page={{ magazine_categorys.next_page_number }}">next</a>
                                            <a href="?page={{ magazine_categorys.paginator.num_pages }}">last &raquo;</a>
                                        {% endif %}
                                    </span>
                                </div>

                            </div>
                            {% else %}
                            
                            {% endif %}
                        </div>
                    </div>

                </div>
                <!-- /.container-fluid -->

            </div>
            <!-- End of Main Content -->
            <style>
                .tableflow{
                    position:relative;
                    top:15px;
                    height: 50px;
                    vertical-align: center;
                }
                .divflow{
                    {% comment %} background-color:black; {% endcomment %}
                    margin:auto;
                    height:50px;
                    width:50px;
                    display:flex;
                    justify-content:center;
                    align-items:center
                }
                .imageflow{
                    max-width:25px
                }
            </style>
            {% include 'web/include_comman/footer.html' %}