{% 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 toc %}
<small class="fw-bold d-block mb-2">{% translate 'On this page' %}</small>
<ul class="list-unstyled">
  <li>
    <a href="#general-infos" class="text-decoration-none">{{ instance.displayname|default:instance.keyname }}</a>
  </li>
  {% for page in instance.PAGES.keys %}
  <li class="mt-1">
    <a href="#{{ page|slugify }}" class="text-decoration-none">{{ page }}</a>
  </li>
  {% endfor %}
  {% if ui_security_view %}
  <li class="mt-1">
    <a href="#permissions" class="text-decoration-none">{% translate 'Permissions' %}</a>
  </li>
  {% endif %}
  {% if related %}
  <li class="mt-1">
    <a href="#related-objects-2" class="text-decoration-none">{% translate 'Related Objects' %}</a>
  </li>
  {% for classname, classentry in related.items %}{% if classentry.count > 0 %}
  <li class="ms-3">
    <a href="#related-objects-2-{{ classname|slugify }}" class="text-decoration-none">{{ classentry.displayname|default:classname }}</a>
  </li>
  {% endif %}{% endfor %}
  {% endif %}
</ul>
{% endblock %}

{% block content %}

<div class="cv-scrollable-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>
            {% if instance.is_enabled %}
            <li>
                <a class="dropdown-item" data-bs-toggle="modal" data-bs-target="#DisableModal">
                    {% translate "Disable" %}
                </a>
            </li>
            {% else %}
            <li>
                <a class="dropdown-item" data-bs-toggle="modal" data-bs-target="#EnableModal">
                    {% translate "Enable" %}
                </a>
            </li>
            {% endif %}
            {% 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 hook_user %}{% include 'app_data/iam/action_user.html' %}{% endif %}
            {% if hook_schema_notify %}{% include 'app_data/sirene/action.html' %}{% 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>
<div id="general-infos" class="cv-scroll-anchor"></div>

<!-- 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>

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

    <tr>
        <td class="table-light" width="30%">
            {{ schema.displayname_label }}
        </td>
        <td>
            {{ instance.displayname|default:'' }}
        </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>{% else %}<span class="badge bg-warning text-dark">{% translate 'disabled' %}</span>{% endif %}
        </td>
    </tr>

</table>



<hr><!-- PAGES / SECTIONS -->
{% for page,pageitems in instance.PAGES.items %}
<div id="{{ page|slugify }}" class="cv-scroll-anchor"></div>
<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%">
            <div class="d-flex justify-content-between align-items-center">
                <span>{{ item.displayname }}</span>
                <span class="cv-field-info ms-1 text-muted"
                    style="cursor:pointer;"
                    tabindex="0"
                    data-bs-toggle="popover"
                    data-bs-placement="right"
                    data-bs-html="true"
                    data-bs-title="{{ item.fieldname }}"
                    data-bs-content="{% if item.description %}<b>{% trans 'Description' %}:</b> {{ item.description }}<br>{% endif %}<b>{% trans 'Format' %}:</b> {{ item.dataformat }}<br><b>{% trans 'Format ext' %}:</b> {{ item.dataformat_ext }}<br><b>{% trans 'Cardinal' %}:</b> {{ item.cardinal_min }}..{{ item.cardinal_max }}"
                ><i class="fa fa-plus-square-o fa-sm me-1"></i></span>
            </div>
        </td>
        <td>
            {% include 'app_data/fields/_datapoint.html' %}
        </td>
    </tr>{% endfor %}{% endfor %}
</table>
{% endfor %}



{% if hook_user %}<!-- HOOK - USER -->
{% include 'app_data/iam/hook_user_detail.html' %}
{% endif %}


{% if hook_group %}<!-- HOOK - GROUP -->
{% include 'app_data/iam/hook_group_detail.html' %}
{% endif %}

{% if hook_role %}<!-- HOOK - ROLE -->
{% include 'app_data/iam/hook_role_detail.html' %}
{% endif %}


{% if ui_security_view %}<!-- OBJECT PERMISSIONS -->
<hr>
<div id="permissions" class="cv-scroll-anchor"></div>

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

    <tr class="table-danger">
        <td colspan="2">
            <strong>{% translate 'Object 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 %}


{% if related %}<!-- RELATED OBJECTS -->
<hr>
<div id="related-objects-2" class="cv-scroll-anchor"></div>
<table class="table table-hover table-bordered table-sm">

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

    {% for classname, classentry in related.items %}{% if classentry.count > 0 %}
    <tr id="related-objects-2-{{ classname|slugify }}" class="cv-scroll-anchor">
        <td class="text-center" style="width:2em;">
            <a class="cv-related-icon" href="{% url 'app_data:instance_list' classname %}?query=RELATED:{{ schema.classname }}:{{ instance.keyname }}">
                <i class="fa {{ classentry.icon }}"></i>
            </a>
        </td>
        <td class="text-center" style="width:3em;">
            <a class="cv-related-count" href="{% url 'app_data:instance_list' classname %}?query=RELATED:{{ schema.classname }}:{{ instance.keyname }}">
                <span class="badge bg-secondary">{{ classentry.count }}</span>
            </a>
        </td>
        <td class="table-light" style="width:20%;">
            <a href="{% url 'app_data:instance_list' classname %}?query=RELATED:{{ schema.classname }}:{{ instance.keyname }}">
                {{ classentry.displayname|default:classname }}
            </a>
        </td>
        <td>
            {% for eav in classentry.instances|slice:":5" %}
                <a href="{% url 'app_data:instance_detail' eav.iid %}">
                    {{ eav.displayname|default:eav.keyname }}</a>
                {% if not forloop.last %}&nbsp; &bull; &nbsp;{% endif %}
            {% endfor %}
            {% if classentry.count > 2 %}&nbsp; &hellip;{% endif %}
        </td>
    </tr>
    {% endif %}{% endfor %}

</table>{% endif %}

</div>

<!-- 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>


<!-- ENABLE CONFIRM Modal -->
<div class="modal fade" id="EnableModal" data-bs-backdrop="static" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">

            <div class="modal-header">
                <h5 class="modal-title">{% translate "Confirm enable?" %}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>

            <div class="modal-body">
                <p class="fw-bold">{{ schema.classname }} : {{ instance.keyname }}</p>
            </div>

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

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


<!-- DISABLE CONFIRM Modal -->
<div class="modal fade" id="DisableModal" data-bs-backdrop="static" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">

            <div class="modal-header">
                <h5 class="modal-title">{% translate "Confirm disable?" %}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>

            <div class="modal-body">
                <p class="fw-bold">{{ schema.classname }} : {{ instance.keyname }}</p>
            </div>

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

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


{% if ui_user_email_test %}
{% include 'app_data/iam/user_mail_test.html' %}
{% endif %}

{% if ui_user_sms_test %}
{% include 'app_data/iam/user_sms_test.html' %}
{% endif %}

<script>
document.addEventListener('DOMContentLoaded', function () {
    function hideAllPopovers(except) {
        document.querySelectorAll('[data-bs-toggle="popover"]').forEach(function (el) {
            if (el !== except) bootstrap.Popover.getInstance(el)?.hide();
        });
    }
    document.querySelectorAll('[data-bs-toggle="popover"]').forEach(function (el) {
        new bootstrap.Popover(el, { container: 'body', trigger: 'manual' });
        el.addEventListener('click', function (e) {
            e.stopPropagation();
            var pop = bootstrap.Popover.getInstance(el);
            var isVisible = el.getAttribute('aria-describedby');
            hideAllPopovers(null);
            if (!isVisible) pop.show();
        });
    });
    document.addEventListener('click', function () {
        hideAllPopovers(null);
    });
});
</script>

{% endblock %}