{% 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 }}</h2>
  <small class="text-muted">{{ instances_count }} / {{ paginator.count }} {% translate "objects" %}</small>
<hr>
{% endblock %}


{% block content %}

<div class="d-flex">


  <div class="mt-2 me-2"> <!-- ACTION -->
    <div class="dropdown">

      <button class="btn btn-outline-dark dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
        <i class="fa fa-lg fa-plus me-2"></i>{% translate 'Action' %}
      </button>

      <ul class="dropdown-menu">

        {% if ui_new %}
        <li>
          <a class="dropdown-item" href="{% url 'app_data:instance_new' schema.classname %}">
            {% translate 'New' %}
          </a>
        </li>
        {% endif %}

        {% if ui_export %}
        <li>
          <a class="dropdown-item" data-bs-toggle="modal" data-bs-target="#ExportModal">
            {% translate "Export" %}
          </a>
        </li>
        {% endif %}


        {% if ui_texteditor %}
        <li>
          <a class="dropdown-item" href="{% url 'app_data:texteditor' schema.classname %}">
            {% translate "Schema" %}</a>
        </li>
        {% endif %}

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


  <div class="p-2">   <!-- DATAVIEW -->
    <button class="btn btn-outline-dark dropdown-toggle px-4 me-2" type="button" data-bs-toggle="dropdown">
      <i class="fa fa-lg fa-eye me-2"></i>{{ dataview.displayname }}
    </button>
    <div class="dropdown-menu">
      {% if dataview.default %}
      <a class="dropdown-item" href="?dv={{ dataview.default }}">{% translate 'Default View' %}</a>
      {% endif %}
      {% for name,value in dataview.selector.items %}
          <a class="dropdown-item" href="?dv={{ name }}">{{ value }}</a>
      {% endfor %}
    </div>
</div>


  <div class="flex-grow-1 p-2"> <!-- SEARCH -->
    <form class="cv-search-form" action="" method="post"> {% csrf_token %}
        <button class="btn btn-success me-2 flex-shrink-0" type="submit" id="search">
          <i class="fa fa-lg fa-search"></i>
        </button>
        <div class="input-group">
          <input type="text" class="form-control" placeholder="{% translate 'search...' %}"
          name="query" value="{{ query }}">
          <button class="btn btn-outline-secondary cv-search-help-btn" type="button"
                  data-bs-toggle="modal" data-bs-target="#searchHelpModal"
                  title="{% translate 'Search syntax help' %}">?</button>
        </div>
    </form>
  </div>



  <div class="d-flex justify-content-center"> <!-- PAGINATOR  -->
    <div class="btn-group">

      {% if paginator.page_last > 1 %}
      <div class="mx-3 pt-2"> <!-- PAGINATOR :  PREV | FIRST (bool)|| CURRENT or page... || LAST | NEXT -->
        <ul class="pagination">

          <!-- PREV -->
          <li class="page-item">
            <a class="page-link" href="?page={{ paginator.page_prev }}&size={{ paginator.size }}">
              &laquo;
            </a>
          </li>

          <!-- FIRST -->
          {% if paginator.page_first %}
          <li class="page-item">
            <a class="page-link active" href="?page=1&size={{ paginator.size }}">
              1
            </a>
          </li>
          {% else %}
          <li class="page-item">
            <a class="page-link" href="?page=1&size={{ paginator.size }}">
              1
            </a>
          </li>
          {% endif %}

        &nbsp;&nbsp;&nbsp;  <!-- CURRENT -->

          {% if paginator.page_current %}
          <li class="page-item">
            <a class="page-link active" href="?page={{ paginator.page }}&size={{ paginator.size }}">
            {{ paginator.page }}
            </a>
          </li>
          {% else %}
          <li class="page-item">
            <a class="page-link disabled">
              ...
            </a>
          </li>
          {% endif %}

        &nbsp;&nbsp;&nbsp;

          <!-- LAST -->
          {% if paginator.page_last_active %}
          <li class="page-item">
            <a class="page-link active" href="?page={{ paginator.page_last }}&size={{ paginator.size }}">
              {{ paginator.page_last }}
            </a>
          </li>
          {% else %}
          <li class="page-item">
            <a class="page-link" href="?page={{ paginator.page_last }}&size={{ paginator.size }}">
              {{ paginator.page_last }}
            </a>
          </li>
          {% endif %}

          <!-- NEXT -->
          <li class="page-item">
            <a class="page-link" href="?page={{ paginator.page_next }}&size={{ paginator.size }}">
              &raquo;
            </a>
          </li>

        </ul>
      </div>

      <!-- SIZE -->
      <div class="mx-3 pt-2">
        <a class="btn btn-outline-primary dropdown-toggle me-4" href="#" role="button" data-bs-toggle="dropdown">
          {{ paginator.size }} {% translate 'per page' %}
        </a>
        <div class="dropdown-menu">
          {% for s in paginator.size_list %}
          <a class="dropdown-item" href="{% url 'app_data:instance_list' schema.classname %}?size={{s}}">
            {{s}}
          </a>
          {% endfor %}
        </div>
      </div>

      {% endif %}

    </div>
  </div>

</div>


<table class="table table-striped table-hover table-sm table-bordered">
<thead class="thead-dark">
    <tr>
    <th></th>
    {% for i in dataview.columns %}
        {% if i == 'keyname' %}<th>{{ schema.keyname_label|default:'Keyname' }}</th>
        {% elif i == 'displayname' %}<th>{{ schema.displayname_label|default:'Name' }}</th>
        {% elif i == 'last_update' %}<th>{% translate 'Last Update' %}</th>
        {% else %}<th class="text-center">{{ i }}</th>{% endif %}
    {% endfor %}
    </tr>
</thead>

<tbody class="small">{% for instance in instances %}
  <tr>
    <td class="cv-burger-cell">
      <div class="dropdown cv-burger-dropdown">
        <button class="cv-burger-btn btn btn-sm" type="button"
          data-bs-toggle="dropdown" data-bs-strategy="fixed"
          aria-expanded="false"
        ><i class="fa fa-ellipsis-v"></i></button>
        <ul class="dropdown-menu shadow">
          <li><a class="dropdown-item" href="{% url 'app_data:instance_detail' instance.id %}">{% translate "Detail" %}</a></li>
          {% if instance.ui_edit or instance.ui_delete or instance.ui_enable_disable %}
          <li><hr class="dropdown-divider"></li>
          {% if instance.ui_edit %}
          <li><a class="dropdown-item" href="{% url 'app_data:instance_edit' instance.id %}">{% translate "Edit" %}</a></li>
          {% endif %}
          {% if instance.ui_enable_disable %}
            {% if instance.is_enabled %}
            <li><a class="dropdown-item"
              data-bs-toggle="modal" data-bs-target="#cv-modal-disable"
              data-action-url="{% url 'app_data:instance_disable' instance.id %}"
              data-label="{{ schema.classname }} : {{ instance.keyname }}"
            >{% translate "Disable" %}</a></li>
            {% else %}
            <li><a class="dropdown-item"
              data-bs-toggle="modal" data-bs-target="#cv-modal-enable"
              data-action-url="{% url 'app_data:instance_enable' instance.id %}"
              data-label="{{ schema.classname }} : {{ instance.keyname }}"
            >{% translate "Enable" %}</a></li>
            {% endif %}
          {% endif %}
          {% if instance.ui_delete %}
          <li><a class="dropdown-item cv-menu-danger"
            data-bs-toggle="modal" data-bs-target="#cv-modal-delete"
            data-action-url="{% url 'app_data:instance_delete' instance.id %}"
            data-label="{{ schema.classname }} : {{ instance.keyname }}"
          >{% translate "Delete" %}</a></li>
          {% endif %}
          {% endif %}
          <li><hr class="dropdown-divider"></li>
          <li><a class="dropdown-item" href="{% url 'app_data:instance_detail' instance.id %}?print=1" target="_blank">{% translate "Print" %}</a></li>
          {% if ui_texteditor %}
          <li><a class="dropdown-item" href="{% url 'app_data:texteditor' instance.id %}">{% translate "Code" %}</a></li>
          {% endif %}
          {% if ui_sirene_new and schema.notify %}
          <li><hr class="dropdown-divider"></li>
          {% for label, tid in schema.notify.items %}
            {% if tid == '_self' %}
            <li><a class="dropdown-item" href="{% url 'app_sirene:new_message' instance.id %}">{{ label }}</a></li>
            {% elif tid == '_template' %}
            <li><a class="dropdown-item" href="{% url 'app_sirene:template_picker' instance.id %}">{{ label }}</a></li>
            {% elif not tid %}
            <li><a class="dropdown-item" href="{% url 'app_sirene:new_message' %}">{{ label }}</a></li>
            {% else %}
            <li><a class="dropdown-item" href="{% url 'app_sirene:new_message' tid instance.id %}">{{ label }}</a></li>
            {% endif %}
          {% endfor %}
          {% endif %}
        </ul>
      </div>
    </td>
    {% for item in instance.datapoints %} <!-- cell -->
        {% if item.fieldname %} <!-- it's a datapoint -->
           <td>{% include 'app_data/fields/_datapoint_nolink.html' %}</td>
        {% else %}  <!-- keyname/displayname non-field cell -->
            <td>
              <a href="{% url 'app_data:instance_detail' instance.id %}">
            {% if instance.is_enabled %}{{ item|default:'' }}{% else %}<del>{{ item|default:'' }}</del>{% endif %}
              </a>
            </td>
        {% endif %}
    {% endfor %}
  </tr>
{% endfor %}
</tbody>
</table>



<!-- Search syntax help modal -->
<div class="modal fade" id="searchHelpModal" tabindex="-1">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title"><i class="fa fa-search me-2"></i>{% translate "Search syntax" %}</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body small">

        <table class="table table-sm table-bordered cv-search-help-table">
          <thead class="table-light">
            <tr><th>{% translate "Pattern" %}</th><th>{% translate "Meaning" %}</th></tr>
          </thead>
          <tbody>
            <tr><td><code>paris</code></td><td>{% translate "Full-text: any field value, keyname or displayname contains 'paris'" %}</td></tr>
            <tr class="table-light"><td colspan="2"><strong>{% translate "Field search" %}</strong></td></tr>
            <tr><td><code>city:Paris</code></td><td>{% translate "Field 'city' contains 'Paris' (case insensitive)" %}</td></tr>
            <tr><td><code>city:Par*</code></td><td>{% translate "Starts with 'Par'" %}</td></tr>
            <tr><td><code>city:*ris</code></td><td>{% translate "Ends with 'ris'" %}</td></tr>
            <tr><td><code>city:*ari*</code></td><td>{% translate "Contains 'ari'" %}</td></tr>
            <tr><td><code>city:"Le Mans"</code></td><td>{% translate "Value with spaces (use quotes)" %}</td></tr>
            <tr class="table-light"><td colspan="2"><strong>{% translate "Comparisons" %}</strong></td></tr>
            <tr><td><code>pop:&gt;=500</code></td><td>{% translate "Numeric: greater than or equal" %}</td></tr>
            <tr><td><code>pop:&lt;100</code></td><td>{% translate "Numeric: less than" %}</td></tr>
            <tr><td><code>date:&gt;="2025-01-01"</code></td><td>{% translate "Date: after (ISO 8601 format)" %}</td></tr>
            <tr class="table-light"><td colspan="2"><strong>{% translate "Boolean operators" %}</strong></td></tr>
            <tr><td><code>A AND B</code></td><td>{% translate "Both must match (default between terms)" %}</td></tr>
            <tr><td><code>A OR B</code></td><td>{% translate "Either matches" %}</td></tr>
            <tr><td><code>NOT A</code></td><td>{% translate "Must not match" %}</td></tr>
            <tr class="table-light"><td colspan="2"><strong>{% translate "Existence" %}</strong></td></tr>
            <tr><td><code>EXISTS:field</code></td><td>{% translate "Field has a non-empty value" %}</td></tr>
            <tr><td><code>EMPTY:field</code></td><td>{% translate "Field has no value set" %}</td></tr>
            <tr><td><code>NOT EMPTY:field</code></td><td>{% translate "Field has a non-empty value (same as EXISTS)" %}</td></tr>
            <tr class="table-light"><td colspan="2"><strong>{% translate "Special fields" %}</strong></td></tr>
            <tr><td><code>is_enabled:True</code></td><td>{% translate "Enabled instances only" %}</td></tr>
            <tr><td><code>is_enabled:False</code></td><td>{% translate "Disabled instances only" %}</td></tr>
            <tr><td><code>keyname:srv*</code></td><td>{% translate "Keyname starts with 'srv'" %}</td></tr>
            <tr><td><code>RELATED:schema:key</code></td><td>{% translate "Instances referencing 'key' in schema 'schema'" %}</td></tr>
          </tbody>
        </table>

        <p class="text-muted mb-0">{% translate "Operators AND / OR / NOT / EXISTS / EMPTY / RELATED must be uppercase." %}</p>

      </div>
      <div class="modal-footer">
        <a role="button" class="btn btn-outline-dark" data-bs-dismiss="modal">{% translate "Close" %}</a>
      </div>
    </div>
  </div>
</div>


<!-- BURGER: confirm Enable modal -->
<div class="modal fade" id="cv-modal-enable" 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 id="cv-modal-enable-label" class="fw-bold"></p></div>
    <div class="modal-footer">
      <form id="cv-modal-enable-form" method="post" action="#">
        {% 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>


<!-- BURGER: confirm Disable modal -->
<div class="modal fade" id="cv-modal-disable" 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 id="cv-modal-disable-label" class="fw-bold"></p></div>
    <div class="modal-footer">
      <form id="cv-modal-disable-form" method="post" action="#">
        {% 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>


<!-- BURGER: confirm Delete modal -->
<div class="modal fade" id="cv-modal-delete" data-bs-backdrop="static" tabindex="-1">
  <div class="modal-dialog"><div class="modal-content">
    <div class="modal-header">
      <h5 class="modal-title">{% translate "Confirm delete?" %}</h5>
      <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
    </div>
    <div class="modal-body"><p id="cv-modal-delete-label" class="fw-bold"></p></div>
    <div class="modal-footer">
      <form id="cv-modal-delete-form" method="post" action="#">
        {% csrf_token %}
        <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>


<!-- EXPORT Modal -->
<div class="modal fade" id="ExportModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">

      <div class="modal-header">
        <h1 class="modal-title fs-5" id="staticBackdropLabel">{% translate "Configure export" %}</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <form action="{% url 'app_data:data_export' %}" method="post">{% csrf_token %}
        <div class="modal-body">

          <h4><i class="fa {{ schema.icon }}"></i> &nbsp; {{ schema.displayname }} ({{ schema.classname }})</h4>
          <br>
          <input type="hidden" name="classname" value="{{ schema.classname }}">
          <input type="hidden" name="query" value="{{ query }}">

          <p>{% translate 'Search query' %} : {{ query|default:'n/a'}}</p>

          <br>
          <h5>{% translate 'Vue' %}</h5>
          <div class="form-check">
            <input class="form-check-input" type="radio" name="dv" value="{{ dataview.keyname }}" checked>
            <label class="form-check-label" for="dataview">
              {% translate 'Current View' %} : {{ dataview.displayname }}
            </label>
          </div>
          <div class="form-check">
            <input class="form-check-input" type="radio" name="dv" value="___ALL___">
            <label class="form-check-label" for="allcols">
              {% translate 'All columns' %}
            </label>
          </div>

          <br>
          <h5>{% translate 'Page' %}</h5>
          <div class="form-check">
            <input class="form-check-input" type="radio" name="page" value="thispage" checked>
            <label class="form-check-label" for="thispage">
              {% translate 'This page' %} - {{ paginator.page }} / {{ paginator.page_last }}
             </label>
          </div>
          <div class="form-check">
            <input class="form-check-input" type="radio" name="page" value="allpages">
            <label class="form-check-label" for="allpages">{% translate 'All pages' %}</label>
          </div>

          <br>
          <h5>{% translate 'Format' %}</h5>
          <div class="form-check">
            <input class="form-check-input" type="radio" name="format" value="yaml" checked>
            <label class="form-check-label" for="yaml">{% translate 'YAML' %}</label>
          </div>
          <div class="form-check">
            <input class="form-check-input" type="radio" name="format" value="json">
            <label class="form-check-label" for="json">{% translate 'JSON' %}</label>
          </div>
          <div class="form-check">
            <input class="form-check-input" type="radio" name="format" value="csv">
            <label class="form-check-label" for="csv">{% translate 'CSV' %}</label>
          </div>

          <br>
          <h5>{% translate 'Options' %} (YAML / JSON)</h5>
          <div class="mb-2">
            <label class="form-label" for="refs">{% translate 'Inline refs' %}</label>
            <input type="text" class="form-control form-control-sm" name="refs" id="refs" placeholder="e.g. user,server  (* = all)">
            <div class="form-text">{% translate 'Comma-separated schema names to inline, or * for all' %}</div>
          </div>
          <div class="mb-2">
            <label class="form-label" for="rev">{% translate 'Revisions' %}</label>
            <input type="number" class="form-control form-control-sm" name="rev" id="rev" min="1" placeholder="{% translate 'number of revisions' %}">
          </div>

        </div>
        <div class="modal-footer">
          <button role="button" class="btn btn-danger">{% translate "Export" %}</button>
          <a role="button" class="btn btn-outline-dark" data-bs-dismiss="modal">{% translate "Cancel" %}</a>
        </div>
      </form>
    </div>
  </div>
</div>


<script>
document.addEventListener('DOMContentLoaded', function () {

    ['enable', 'disable', 'delete'].forEach(function (action) {
        document.getElementById('cv-modal-' + action).addEventListener('show.bs.modal', function (e) {
            const trigger = e.relatedTarget;
            if (!trigger) return;
            document.getElementById('cv-modal-' + action + '-form').action = trigger.dataset.actionUrl;
            document.getElementById('cv-modal-' + action + '-label').textContent = trigger.dataset.label;
        });
    });

});
</script>


{% endblock %}
