{% extends "app_home/base.html" %}
{% load static %}
{% load i18n %}

{% block navbar_app %}
{% include 'app_home/_sidebar.html' %}
{% endblock %}


{% block title %}
<h2>
    <a href="{% url 'app_data:instance_list' schema.classname %}">
        <i class="fa {{ schema.icon }}"></i>
        &nbsp; {{ schema.displayname }}
    </a> : {{ instance.displayname|default:instance.keyname }}
</h2>
<small class="text-muted">{{ instance.keyname }} ({{instance.id}})</small>

<hr>
{% endblock %}

{% block content %}

<div class="d-flex">

    <!-- UI action selector -->
    <div class="dropdown">
        <button class="btn btn-outline-dark dropdown-toggle" type="button" data-bs-toggle="dropdown">
            <i class="fa fa-lg fa-plus me-2"></i>{% translate 'Action' %}
        </button>

        <ul class="dropdown-menu">

            {% if ui_edit %}
            <li>
                <a class="dropdown-item" href="{% url 'app_data:instance_edit' instance.id %}">
                    {% translate 'Edit' %}
                </a>
            </li>
            {% endif %}


            {% if hooks %}{% endif %}
            {% if ui_sirene %}<!-- SIRENE HOOK V0 -->
            <li>
                <a class="dropdown-item" href="?hook=notify">{% translate 'Notify' %}</a>
            </li>
            {% endif %}

            <li>
                <a class="dropdown-item" href="?detail={{ toggle_detail }}">
                    {% translate 'Toggle details' %}
                </a>
            </li>

            <li>
                <a class="dropdown-item" href="?print=1">
                    {% translate "Print" %}
                </a>
            </li>

            {% if ui_delete %}
            <li>
                <a class="dropdown-item" data-bs-toggle="modal" data-bs-target="#DeleteModal">
                    {% translate "Delete" %}
                </a>
            </li>
            {% endif %}

            {% if ui_texteditor %}
            <li>
                <hr class="dropdown-divider">
            </li>
            <li>
                <a class="dropdown-item" href="{% url 'app_data:texteditor' instance.id %}">
                    {% translate "Code" %}</a>
            </li>
            {% endif %}

        </ul>
    </div>
</div>



<hr><!-- GENERAL INFOS -->
<table class="table table-hover table-bordered table-sm">

    <tr class="table-success">
        <td colspan="2">
            <div class="d-flex">
                <div class="flex me-2">
                    <strong>
                        {{ instance.displayname|default:instance.keyname }}
                    </strong>
                </div>
                {% if revisions %}
                <div class="flex ms-auto me-2"><!-- REVISIONS -->
                    <div class="dropdown">
                        <button class="btn btn-outline-dark btn-sm dropdown-toggle" type="button"
                            data-bs-toggle="dropdown">
                            {% translate 'Revisions' %}
                        </button>
                        <ul class="dropdown-menu">
                            {% for rev in revisions %}
                            <li>
                                <pre>  {{ rev.date}} - {{ rev.action }} - {{ rev.username }}  </pre>
                            </li>
                            {% endfor %}
                        </ul>
                    </div>
                </div>
                {% endif %}
            </div>
        </td>
    </tr>

    <tr>
        <td class="table-light" width="30%">
            {{ schema.keyname_label }}
        </td>
        <td>
            {{ instance.keyname }}
        </td>
    </tr>

    <tr>
        <td class="table-light" width="30%">
            {{ schema.displayname_label }}
        </td>
        <td>
            {{ instance.displayname }}
        </td>
    </tr>

    <tr>
        <td class="table-light" width="30%">
            {% translate 'Is Enabled' %}
        </td>
        <td>
            {% if instance.is_enabled %}<i class="fa fa-check" aria-hidden="true"></i>{% endif %}
        </td>
    </tr>

</table>


<!-- PAGES / SECTIONS -->
<hr>
{% for page,pageitems in instance.PAGES.items %}
<table class="table table-hover table-bordered table-sm">
    <tr class="table-primary">
        <td colspan="2">
            <strong>{{page}}</strong>
        </td>
    </tr>
    {% for order,orderitems in pageitems.items %}{% for item in orderitems %}<tr>
        <td class="table-light" width="30%">
            {{ item.displayname }}
        </td>
        <td>
            {% include 'app_data/fields/_datapoint.html' %}
        </td>
    </tr>{% endfor %}{% endfor %}
</table>
{% endfor %}


<!-- PERMISSIONS -->{% if ui_security_view %}
<hr>

<table class="table table-hover table-bordered table-sm">

    <tr class="table-danger">
        <td colspan="2">
            <strong>{% translate 'Permissions' %}</strong>
        </td>
    </tr>

    <tr>
        <td class="table-light" width="30%">{% translate 'Read Permission' %}</td>
        <td>{{ instance.p_read|default_if_none:'' }}</td>
    </tr>

    <tr>
        <td class="table-light" width="20%">{% translate 'Update Permission' %}</td>
        <td>{{ instance.p_update|default_if_none:'' }}</td>
    </tr>

    <tr>
        <td class="table-light" width="20%">{% translate 'Delete Permission' %}</td>
        <td>{{ instance.p_delete|default_if_none:'' }}</td>
    </tr>

</table>{% endif %}


<!-- RELATED OBJECTS -->
{% if related %}
<hr>
<table class="table table-hover table-bordered table-sm">

    <tr class="table-warning">
        <td colspan="2">
            <strong>{% translate 'Related Objects' %}</strong>
        </td>
    </tr>

    {% for r in related %}<tr>
        <td class="table-light" width="30%">
            <a href="{% url 'app_data:instance_detail' r.iid %}">
                {{ r.classname_displayname|default:r.classname }}
            </a>
        </td>
        <td>
            <a href="{% url 'app_data:instance_detail' r.iid %}">
                {{ r.displayname|default:r.keyname }}
            </a>
        </td>
    </tr>{% endfor %}

</table>{% endif %}






<!-- DELETE CONFIRM Modal -->
<div class="modal fade" id="DeleteModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
    aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">

            <div class="modal-header">
                <h1 class="modal-title fs-5" id="staticBackdropLabel">{% translate "Confirm delete ?" %}</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <div class="modal-body">
                <p>{{ schema.classname }} : {{ instance.keyname }} ({{ instance.id }}) ?</p>
            </div>

            <div class="modal-footer">
                <form action="{% url 'app_data:instance_delete' instance.id %}" method="post">{% csrf_token %}
                    <button role="button" class="btn btn-danger">{% translate "Delete" %}</button>
                    <a role="button" class="btn btn-outline-dark" data-bs-dismiss="modal">{% translate "Cancel" %}</a>
                </form>
            </div>

        </div>
    </div>
</div>



{% endblock %}