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

        <!-- Sidebar -->
        {% include 'web/include_comman/sidebar.html' with active_tab='blog_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">

                    <!-- Search Form -->
                    <div class="col-lg-6 mb-3">
                        <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">                                    <div class="input-group">
                            <input type="text" class="form-control bg-light border-1 small" name="search" value="{{search}}"  placeholder="Search for..."
                                aria-label="Search" aria-describedby="basic-addon2">
                            <div class="input-group-append mr-2">
                                <button class="btn btn-primary" type="submit">
                                    <i class="fas fa-search fa-sm"></i>
                                </button>
                            </div>
                            <a href="{% url 'web:blogs' %}?page={{page}}" class="btn btn-info mr-2 btn-sm float-right" role="button">Refresh</a>
                        </div>
                    </form>
                    </div>
                   

                    <!-- 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">Blogs List</h6>
                                </div>
                                <div class="col-lg-6">
                                    {% if request.user.roles_id == 3 or request.user.roles_id == 4 %}
                                    <a href="{% url 'web:addblogs' %}?page={{page}}" class="btn btn-success btn-sm float-right" role="button">Add New</a>
                                    {% endif %}
                                </div>
                                {% comment %} <div class="col-lg-6">
                                    <a href="{% url 'web:editblogs' blog.id %}?page={{page}}" class="btn btn-success btn-sm float-right" role="button">Add New</a>
                                </div> {% endcomment %}
                            </div>
                        </div>
                        <div class="card-body">
                            {% include 'web/message.html' %}
                            
                            <div class="table-responsive mt-3">
                                {% if blog %}
                                <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
                                    <thead>
                                        <tr>
                                            <th>S.No.</th>                                            
                                            <th>Blog Image</th>
                                            <th>Category Name</th>
                                            <th>Blog title</th>
                                            {% comment %} <th>Blog Content</th> {% endcomment %}
                                            {% if request.user.roles_id == 1 or request.user.roles_id == 2 %}
                                            <th>Status</th>
                                            <th>Approval Status</th>
                                            {% endif %}
                                            {% if request.user.roles_id == 3  or request.user.roles_id == 4%}
                                            <th>Action</th>
                                            {% endif %}
                                            
                                            {% comment %} <th>Action</th> {% endcomment %}
                                        </tr>
                                    </thead>
                                   
                                    <tbody>
                                        {% for blog in blog %}
                                        <tr style="{% if blog.is_aproved == 0 %}background: #FFC4C4;{% endif %} {% if blog.is_active == 0 %}background: #FFC4C4;{% endif %}">
                                            <td style="vertical-align: middle;">{{forloop.counter}}</td>
                                            {% comment %} <td class="tableflow">{{blog.cover_image}}</td> {% endcomment %}
                                            <td >
                                                {% if blog.cover_image %}
                                                <img src="{{blog.cover_image.url}}" style="width:100px;border-radius: 30px; " class="imageflow" data-toggle="modal" data-target="#image-popup{{forloop.counter}}">
                                                <div class="modal fade bd-example-modal-lg" id="image-popup{{forloop.counter}}" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
                                                    <div class="modal-dialog modal-lg">
                                                    <div class="modal-content bg-transparent text-dark" style="border:none;">
                                                        <div class="modal-header bg-transparent text-dark">
                                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                            <span aria-hidden="true">&times;</span>
                                                            </button>
                                                        </div>
                                                        <img src="{{blog.cover_image.url}}" style="width: 100%;height: 100%;"/ >
                                                    </div>
                                                    </div>
                                                </div>
                                                {% else %}

                                                {% endif %}
                                            </td>
                                            <td style="vertical-align: middle;" >{{blog.category}}</td>
                                            <td style="vertical-align: middle;" >{{blog.title}}</td>
                                            {% comment %} <td style="vertical-align: middle;" ></td> {% endcomment %}
                                            {% comment %} /////////////////// {% endcomment %}
                                            {% if request.user.roles_id == 1  or request.user.roles_id == 2%}
                                                {% if blog.is_aproved == 0 %}
                                                    <td style="vertical-align: middle;" title="Active Magazine"><a class="btn-secondary active btn-sm disabled-a" style="text-decoration: none;font-size: 12px;font-weight: bold;" desabled>Deactivate</i></a></td>
                                                {% elif blog.is_aproved == 1 %}
                                                    {% if blog.is_active == 1 %}
                                                    <td style="vertical-align: middle;" title="Active Magazine"><a href="{% url 'web:deactivate_blog_view' blog.id %}?page={{page}}" class="btn-secondary active btn-sm" onclick="conformBox3()" style="text-decoration: none;font-size: 12px;font-weight: bold;">Deactivate</i></a></td>
                                                    {% else %}
                                                    <td style="vertical-align: middle;" title="Inactive Magazine"><a href="{% url 'web:activate_blog_view' blog.id %}?page={{page}}" class="btn-success active btn-sm px-3" onclick="conformBox2()" style="text-decoration: none;font-size: 12px;font-weight: bold;">Activate</a></td>
                                                    {% endif %}
                                                {% else %}
                                                <td style="vertical-align: middle;">
                                                    <button type="button" class="btn btn-success btn-sm mt-2 py-0 px-3" data-toggle="modal" data-target=".bd-example-modal-lg-preview{{forloop.counter}}"
                                                        style="">
                                                        Activate
                                                    </button></td>
                                                
                                                {% endif %}
                                            {% comment %} #---------------------------------------------------for preview-------------------------------- {% endcomment %}
                                            <td style="vertical-align: middle;">
                                                <button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target=".bd-example-modal-lg-preview{{forloop.counter}}">Preview</button>

                                                <div class="modal fade bd-example-modal-lg-preview{{forloop.counter}}" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
                                                  <div class="modal-dialog modal-lg">
                                                    <div class="modal-content p-2">
                                                        <div class="modal-header">
                                                        <h5 class="modal-title" id="exampleModalLongTitle" style="color:black!important;">Preview</h5>
                                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                            <span aria-hidden="true">&times;</span>
                                                        </button>
                                                    </div>
                                                    <div class="modal-body text-dark" style="overflow: hidden;color:black!important;">
                                                        {{blog.content|safe}}
                                                        <hr>
                                                        {% if blog.is_aproved == 1 %}
                                                        <div class="row">
                                                            <div class="col-lg-6">
                                                            <button type="button" id="but_css" class="dropdown-item mt-1 bg-success float-right text-light" style="opacity:0.6;" disabled>Approved</button>
                                                            </div>
                                                            <div class="col-lg-6">
                                                            <button class="dropdown-item  bg-danger disabled-a text-light" id="but_css1" style="font-weight:bold;opacity:0.6;" disabled>Disapprove</button>
                                                            </div>
                                                        </div>
                                                        {% elif blog.is_aproved == 0 %}
                                                        <div class="row">
                                                            <div class="col-lg-6">
                                                            <button type="button" id="but_css" class="dropdown-item mt-1 bg-success text-light float-right"style="opacity:0.6;" disabled>Approve</button>
                                                            </div>
                                                            <div class="col-lg-6">
                                                            <button class="dropdown-item  bg-danger disabled-a text-light" id="but_css1" href="" style="font-weight:bold;opacity:0.6;">Disapproved</button>
                                                            </div>
                                                        </div>
                                                        {% else %}
                                                        <div class="row">
                                                            {% comment %} 888888888888888 {% endcomment %}
                                                            <div class="col-lg-12">
                                                                <div class="row">
                                                                    <div class="col-lg-6">
                                                                        <a class="dropdown-item  bg-success text-light" id="but_css1 " href="{% url 'web:approve_blogs' blog.id %}"  style="font-weight:bold;">Approve</a>
                                                                    </div>
                                                                    <div class="col-lg-6">
                                                                    <a class="dropdown-item  bg-danger text-light" id="but_css1" href="{% url 'web:disapprove_blogs' blog.id %}" onclick="conformBox3()" style="font-weight:bold;">Disapprove</a>
                                                                    </div>
                                                                </div>
                                                        {% endif %}
                                                    </div>
                                                    </div>
                                                  </div>
                                                </div>    
                                            </td>   
                                            {% endif %}
                                            {% if request.user.roles_id == 3  or request.user.roles_id == 4%}
                                            <td style="vertical-align: middle;">
                                                <span class="text-center" style="text-align: center;">
                                                    <a href="{% url 'web:editblogs' blog.id %}?page={{page}}" class="" role="button" aria-pressed="true"><i class="fas fa-fw fa-edit text-info" ></i></a>
                                                    <a href="{% url 'web:deleteblogs' blog.id %}" id="action_btnn" class="" onclick="conformBox()" ><i class="fas fa-fw fa-trash text-danger" ></i></a>
                                                    
                                                <!-- End Pop Up Box-->
                                                </span>
                                            </td> 
                                            {% endif %}


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

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

            </div>
            <!-- End of Main Content -->
            <style>
                .tableflow{
                    position:relative;
                    top:35px;
                    height: 50px;
                    vertical-align: center;
                }
                .imageflow{
                    height:100px;
                    width:20px;
                }
                    a{
                        margin: 3px;
                    }

            .modal-body img{
                width:100%;
            }
            </style>
            {% include 'web/include_comman/footer.html' %}