{% extends "sample_base.html" %}
{% load static %}
{% load crispy_forms_tags %}

{% block title %}
<title>Sample Department Index</title>
{% endblock title %}
{% block Style %}
<style>
  .search {
    width: 94%!important;
  }
  .data-search {
    justify-content: flex-start;
  }

</style>

{% endblock Style %}

{% block MainContent %}

<div class="contents">

    {% if messages %}
        {% for message in messages %}
            <div id="divID" class="alert alert-dismissible fade show {% if message.tags %}alert-{% if message.level == DEFAULT_MESSAGE_LEVELS.ERROR %}danger{% else %}{{ message.tags }}{% endif %}{% endif %}"
                role="alert">{{ message }}
                <button aria-label="Close" class="btn-close" data-bs-dismiss="alert" type="button"></button>
            </div>
        {% endfor %}
    {% endif %}

    <div class="table-area">
        <div class="table-title">
            <div class="row">
                <div class="col-md-4">
                    <div class="style-name">
                        <h4>Sample Department Index</h4>
                    </div>
                </div>
                <div class="col-md-8">
                    <div class="add-btn">
                        <a href="{% url 'sample_app_department_create' %}">
                            <button class="cus-btn" id="mother-rganization" name="button" type="button">
                                <i aria-hidden="true" class="fa fa-plus-circle"></i>
                                Sample Department
                            </button>
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <div class="tables table-responsive" id="styleList">
            <table class="table  table-striped table-hover align-middle">
                <thead>
                    <tr>
                        <th class="text-center" scope="col">SL</th>
                        <th class="text-center" scope="col">Sample Section</th>
                        <th class="text-center" scope="col">Mother Organization</th>
                        <th class="text-center" scope="col">Sister Organization</th>
                        <th class="text-center" scope="col">Branch</th>
                        <th class="text-center" scope="col">Department</th>
                        <th class="text-center" scope="col">Action</th>
                    </tr>
                </thead>
                <tbody>
                {% if sample_department %}
                    {% for item in sample_department %}
                    <tr>
                        <td class="align-middle">{{forloop.counter}}</td>
                        <td class="align-middle">{{ item.sample_section }}</td>
                        <td class="align-middle">{{ item.mother_organization }}</td>
                        <td class="align-middle">{{ item.sister_organization }}</td>
                        <td class="align-middle">{{ item.branch }}</td>
                        <td class="align-middle">{{ item.department }}</td>
                        <td class="align-middle">
                            <ul class="action">
                                <li>
                                    <a href="{% url 'sample_app_department_update' item.id %}">
                                        <i aria-hidden="true" class="fa fa-pencil"></i>
                                    </a>
                                </li>
                                <li>
                                    <a href="{% url 'sample_app_department_delete' item.id %}" onclick="SweetDelete(event,this.href)">
                                        <i aria-hidden="true" class="fa fa-trash"></i>
                                    </a>
                                </li>
                            </ul>
                        </td>
                    </tr>
                    {% endfor %}
                {% else %}
                    <tr><td colspan="7" class="text-center">No Data Is Found</td></tr>
                {% endif %}
                </tbody>
            </table>
        </div>
    </div>
</div>
{% endblock MainContent %}

{% block meassage %}

{% include 'notifications/notifications.html' %}

{% endblock meassage %}

{% block JS %}
    <script src="{% static 'js/sample_app/settings/script.js' %}"></script>  
{% endblock JS %}