{% extends 'base_structure/layout/base_template.html' %}
{% load static %}
{% block stylesheet %}
    <!-- include required css cdn link through html here -->

    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    
{% endblock %}

{% block content %}

<div class="row layout-top-spacing">
    <div class="col-lg-12">
        <div class="row mb-2">
            <div class="col">
                <a href="{% url 'module_iam:role'%}" style="height: fit-content;width: fit-content;display: inline-block;">
                <h3 class="card-title m-2 d-flex align-items-center gap-2" style="width: fit-content;"><span class="fw-bold material-symbols-outlined">
                    arrow_back
                    </span><span>Add Role and Assgin Permission</span></h3>
                </a>
            </div>
        </div>
        <div class="row layout-spacing">
            <div class="col-lg-12">
                <div class="statbox widget box box-shadow">
                    <div class="widget-content widget-content-area">
                        {% if form.non_field_errors %}
                            <div class="text-danger">
                                <ul>
                                    {% for error in form.non_field_errors %}
                                        <li>{{ error }}</li>
                                    {% endfor %}
                                </ul>
                            </div>
                        {% endif %}

                        <form method="post">
                            {% csrf_token %}
                            <div class="form-group mb-4">
                                <label for="{{ form.name.id_for_label }}">{{ form.name.label }}</label>
                                <input type="text" class="form-control" name="{{ form.name.name }}" id="{{ form.name.id_for_label }}" placeholder="Enter {{ form.name.label }}" value="{% if form.name.value %}{{ form.name.value }}{% endif %}">
                                <!-- Display field errors -->
                                {% for error in form.name.errors %}
                                    <div class="text-danger">{{ error }}</div>
                                {% endfor %}
                            </div>
                            {% if form.active %}
                                <div class="form-group mb-3">
                                    <div class="form-check">
                                        <input type="checkbox" class="form-check-input" id="{{ form.active.id_for_label }}" name="{{ form.active.name }}" {% if form.active.value %}checked{% endif %}>
                                        <label class="form-check-label" for="{{ form.active.id_for_label }}">{{ form.active.label }}</label>
                                    </div>
                                    {% if form.active.errors %}
                                        <div class="text-danger">{{ form.active.errors }}</div>
                                    {% endif %}
                                    {% if field.help_text %}
                                        <small class="form-text text-muted">{{ field.help_text }}</small>
                                    {% endif %}
                                </div>
                            {% endif %}
                            <div class="table-responsive">
                                <label>Assigned Permission</label>
                                <table class="table">
                                    <thead>
                                        <tr>
                                            <th>Resource</th>
                                            <th class="text-center" colspan="4">Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <!-- Replace this section with your Django template code -->
                                        {% for resource, actions in app_resource_action.items %}
                                            <tr>
                                                <td class="">{{ resource }}</td>
                                                {% for id, action in actions.items %}
                                                <td>
                                                    <div class="form-check form-check-success form-check-inline">
                                                        <input class="form-check-input mt-1" type="checkbox" name="app_resource_action" value="{{ id }}" id="checkbox_{{ id }}" {% if id in form.app_resource_action.value %}checked{% endif %}>
                                                        &nbsp;&nbsp;<label class="form-check-label pd-0" for="checkbox_{{ id }}">{{ action }}</label>
                                                    </div>
                                                </td>
                                                
                                                {% endfor %}
                                            </tr>
                                        {% endfor %}
                                        <!-- End of Django template code -->
                                    </tbody>
                                </table>
                            </div>
                            <div class="mt-4 mb-0">
                                <div class="d-grid"><button class="btn btn-primary btn-block" type="submit">Submit</button></div>
                            </div>
                        </form>
                    
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


{% endblock content %}

{% block javascript %}
    <!-- include required js cdn link through html here -->
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script>
        $(document).ready(function() {
            $('.js-example-basic-multiple').select2({
                placeholder: 'Select options',
                allowClear: true,
                tags: true, // Allow the user to enter custom tags
                tokenSeparators: [',', ' '], // Customize token separators
                closeOnSelect: false // Keep the dropdown open after selection
            });
        });
    </script>


{% endblock %}