{% extends "app_home/base_toc.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" style="font-size: 0.85rem;">
  <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 style="height: calc(100vh - 200px); overflow-y: auto; padding-right: 15px;">

<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 %}<!-- HOOK -->{% 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>
<div id="general-infos" style="scroll-margin-top: 60px;"></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>{% endif %}
        </td>
    </tr>

</table>


<!-- PAGES / SECTIONS -->
<hr>
{% for page,pageitems in instance.PAGES.items %}
<div id="{{ page|slugify }}" style="scroll-margin-top: 60px;"></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%">
            {{ item.displayname }}
        </td>
        <td>
            {% include 'app_data/fields/_datapoint.html' %}
        </td>
    </tr>{% endfor %}{% endfor %}
</table>
{% endfor %}


<!-- PERMISSIONS -->{% if ui_security_view %}
<hr>
<div id="permissions" style="scroll-margin-top: 60px;"></div>

<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 2 -->
{% if related %}
<hr>
<div id="related-objects-2" style="scroll-margin-top: 60px;"></div>
<table class="table table-hover table-bordered table-sm">

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

    {% for classname, classentry in related.items %}{% if classentry.count > 0 %}<tr id="related-objects-2-{{ classname|slugify }}" style="scroll-margin-top: 60px;">
        <td class="table-light" width="30%">
            {{ classentry.displayname|default:classname }} ({{ classentry.count }})
        </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 %}<br>{% endif %}
            {% endfor %}
            {% if classentry.count > 5 %}
                <br><button class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#RelatedModal{{ forloop.counter }}">{% translate '...' %}</button>
            {% endif %}
        </td>
    </tr>{% endif %}{% endfor %}

</table>{% endif %}

</div>


<!-- RELATED OBJECTS 2 MODALS -->
{% for classname, classentry in related.items %}{% if classentry.count > 5 %}
<div class="modal fade" id="RelatedModal{{ forloop.counter }}" data-bs-backdrop="static" data-bs-keyboard="true" tabindex="-1" aria-labelledby="RelatedModalLabel{{ forloop.counter }}" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="RelatedModalLabel{{ forloop.counter }}">{{ classentry.displayname|default:classname }} ({{ classentry.count }})</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <table class="table table-sm">
                    <thead>
                        <tr>
                            <!-- <th>{% translate 'ID' %}</th> -->
                            <th>{% translate 'Name' %}</th>
                        </tr>
                    </thead>
                    <tbody>
                    {% for eav in classentry.instances %}
                        <tr>
                            <!-- <td>
                                <a href="{% url 'app_data:instance_detail' eav.iid %}">
                                    {{ eav.iid }}
                                </a>
                            </td> -->
                            <td>
                                <a href="{% url 'app_data:instance_detail' eav.iid %}">
                                    {{ eav.displayname|default:eav.keyname }}
                                </a>
                            </td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-dark" data-bs-dismiss="modal">{% translate "Close" %}</button>
            </div>
        </div>
    </div>
</div>
{% endif %}{% endfor %}

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