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

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


{% block title %}

<h2>
    <i class="fa {{ schema.icon }}"></i>
    &nbsp; {{ schema.displayname }} : {{ instance.displayname|default:instance.keyname }}
</h2>
<small class="text-muted">{{ instance.keyname }} ({{instance.id}})</small>
<hr>
{% endblock %}


{% block content %}



<!-- UI action selector -->
<div class="dropdown">       
    <button class="btn btn-outline-dark dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
        {% 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><hr class="dropdown-divider"></li>
        </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>
            <li><hr class="dropdown-divider"></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>


<hr>
<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>
                <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>
            </div>
        </td>
    </tr>


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

    <tr><td class="table-light" width="20%">{% translate 'ID' %}</td>
        <td>{{ instance.id }}</td></tr>

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


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

</table>


<hr>
<table class="table table-hover table-bordered table-sm">
    <tr class="table-primary">

        <td>
            <strong>keyname</strong>
        </td>

        <td colspan="1">
            <strong>page / order</strong>
        </td>
        <td>
            <strong>displayname</strong>
        </td>


        <td>
            <strong>dataformat</strong>
        </td>
        <td>
            <strong>dataformat_ext</strong>
        </td>
        <td>
            <strong>value</strong>
        </td>
        <td>
            <strong>description</strong>
        </td>

    </tr>

{% for page,pageitems in instance.PAGES.items %}
{%  for order,orderitems in pageitems.items %}{% for item in orderitems %}<tr>
    <td class="table-light">
        {{ item.fieldname }}
    </td>

    <td class="table-light">
        {{ page }} / {{ order }}
    </td>    
    <td class="table-light">
        {{ item.displayname }}
    </td>

    <td class="table-light">
        {{ item.dataformat }}
    </td>
    <td class="table-light">
        {{ item.dataformat_ext|default:'' }}
    </td>
    <td>
        {% include 'app_data/fields/_datapoint.html' %}
    </td>
    <td class="table-light">
        {{ item.description|default:'' }}
    </td>
    </tr>{% endfor %}{% endfor %}
{%  endfor %}
</table>


{% if ui_security_view %}
<hr>
<table class="table table-hover table-bordered table-sm">

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

    <tr><td class="table-light" width="20%">{% 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 %}

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