{% 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>
  <a href="#" class="cv-schema-help-icon" data-bs-toggle="modal" data-bs-target="#schemaHelpModal"
     title="{% translate 'Schema info' %}"><i class="fa fa-question-circle"></i></a>
  &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 %}

        <li>
          <a class="dropdown-item" href="#" data-bs-toggle="modal" data-bs-target="#schemaHelpModal">
            {% translate "Description" %}
          </a>
        </li>

        {% if ui_code_editor %}
        <li>
          <a class="dropdown-item" href="{% url 'app_data:code_editor' 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>
    {% if hook_ipam_subnet_list %}
        <th><div class="d-flex align-items-center gap-1"><span>{% translate 'Subnet' %}</span>
            {% include 'app_data/_field_info_popover_span.html' with fieldname='keyname' %}</div></th>
        <th><div class="d-flex align-items-center gap-1"><span>{% translate 'Description' %}</span>
            {% include 'app_data/_field_info_popover_span.html' with fieldname='description' %}</div></th>
        <th class="text-end">{% translate 'Size' %}</th>
        <th class="text-end">{% translate 'Used' %}</th>
        <th class="text-end">{% translate 'Percent' %}</th>
        <th>{% translate 'Occupancy' %}</th>
        <th>{% translate 'VLAN' %}</th>
    {% elif hook_ipam_vlan_list %}
        <th><div class="d-flex align-items-center gap-1"><span>{% translate 'VLAN' %}</span>
            {% include 'app_data/_field_info_popover_span.html' with fieldname='keyname' %}</div></th>
        <th><div class="d-flex align-items-center gap-1"><span>{{ schema.displayname_label|default:'Name' }}</span>
            {% include 'app_data/_field_info_popover_span.html' with fieldname='displayname' %}</div></th>
        <th><div class="d-flex align-items-center gap-1"><span>{% translate 'Description' %}</span>
            {% include 'app_data/_field_info_popover_span.html' with fieldname='description' %}</div></th>
        <th class="text-end"><div class="d-flex align-items-center justify-content-end gap-1"><span>{% translate 'VLAN ID' %}</span>
            {% include 'app_data/_field_info_popover_span.html' with fieldname='vlan_id' %}</div></th>
        <th><div class="d-flex align-items-center gap-1"><span>{% translate 'Subnet' %}</span>
            {% include 'app_data/_field_info_popover_span.html' with fieldname='subnet' %}</div></th>
        <th class="text-end">{% translate 'Size' %}</th>
        <th class="text-end">{% translate 'Used' %}</th>
        <th class="text-end">{% translate 'Percent' %}</th>
        <th>{% translate 'Occupancy' %}</th>
    {% else %}
    <th></th>
    {% for col in dataview.columns %}
        <th class="text-center">
          <div class="d-flex justify-content-center align-items-center gap-1">
            <span>{{ col.label }}</span>
            {% if col.popover and col.fieldname %}
            {% include 'app_data/_field_info_popover_span.html' with fieldname=col.fieldname hide_filter=col.filter|yesno:",yes" %}
            {% endif %}
          </div>
        </th>
    {% endfor %}
    {% endif %}
    </tr>
</thead>

<tbody class="small">{% for instance in instances %}
  {% if hook_ipam_subnet_list %}
    {% include 'app_data/ipam/_subnet_hierarchy_row.html' with row=instance.ipam_subnet_row %}
  {% elif hook_ipam_vlan_list %}
    {% include 'app_data/ipam/_vlan_row.html' with row=instance.ipam_vlan_row %}
  {% else %}
  <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 %}
          <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 %}

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


          {% if hook_schema_notify %}{% include 'app_data/sirene/action.html' %}{% endif %}
          {% if hook_user %}{% include 'app_data/iam/action_user.html' %}{% 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_code_editor %}
          <li><a class="dropdown-item" href="{% url 'app_data:code_editor' instance.id %}">
            {% translate "Code" %}</a></li>
          {% 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>
  {% endif %}
{% 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 'Columns' %}</h5>
          <div class="form-check">
            <input class="form-check-input" type="radio" name="dv" value="___ALL___" id="dv-all" checked>
            <label class="form-check-label" for="dv-all">
              {% translate 'Columns' %}
            </label>
          </div>
          <div class="mb-2">
            <input type="text" class="form-control form-control-sm" name="fields" id="fields" value="*" placeholder="*">
            <div class="form-text">{% translate 'Comma-separated column names ("a,b,c*"), or * for all. Prefix the whole list with ! to exclude instead of include.' %}</div>
          </div>
          <div class="form-check">
            <input class="form-check-input" type="radio" name="dv" value="{{ dataview.keyname }}" id="dv-current">
            <label class="form-check-label" for="dv-current">
              {% translate 'Current View' %} : {{ dataview.displayname }}
            </label>
          </div>
          <div class="mb-2">
            <input type="text" class="form-control form-control-sm" name="dv_fields" id="dv_fields" value="{{ dataview.get_csv_fieldnames|join:',' }}">
            <div class="form-text">{% translate 'CSV export only: real field names from this view, editable. YAML/JSON export always follows the view as defined.' %}</div>
          </div>

          <input type="hidden" name="page" value="allpages">

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

          <br>
          <h5>{% translate 'Options' %} (CSV)</h5>
          <div class="mb-2">
            <label class="form-label" for="delimiter">{% translate 'Delimiter' %}</label>
            <select class="form-select form-select-sm" name="delimiter" id="delimiter">
              <option value="">{% translate 'Default' %}</option>
              <option value=",">, ({% translate 'comma' %})</option>
              <option value=";">; ({% translate 'semicolon' %})</option>
              <option value="&#9;">{% translate 'Tab' %}</option>
              <option value="|">| ({% translate 'pipe' %})</option>
            </select>
          </div>
          <div class="mb-2">
            <label class="form-label" for="encoding">{% translate 'Encoding' %}</label>
            <select class="form-select form-select-sm" name="encoding" id="encoding">
              {% for enc in supported_encoding %}
              <option value="{{ enc }}"{% if enc == "utf-8" %} selected{% endif %}>{{ enc }}</option>
              {% endfor %}
            </select>
          </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;
        });
    });

    function syncExportColumnInputs() {
        const isAll = document.getElementById('dv-all').checked;
        document.getElementById('fields').disabled = !isAll;
        document.getElementById('dv_fields').disabled = isAll;
    }
    document.getElementById('dv-all').addEventListener('change', syncExportColumnInputs);
    document.getElementById('dv-current').addEventListener('change', syncExportColumnInputs);
    syncExportColumnInputs();

    // column-header popover "Filter" button: append "fieldname:XXXXX" (or
    // " AND fieldname:XXXXX" if the search box already has content) to the
    // search query, left for the user to edit. Delegated on document since
    // the button only exists in the DOM while its popover is open.
    document.addEventListener('click', function (e) {
        const filterBtn = e.target.closest('.cv-filter-button');
        if (!filterBtn) return;
        const fieldname = filterBtn.dataset.fieldname;
        const input = document.querySelector('.cv-search-form input[name="query"]');
        if (!input || !fieldname) return;
        const addition = fieldname + ':XXXXX';
        const current = input.value.trim();
        input.value = current ? current + ' AND ' + addition : addition;
        input.focus();
    });

});
</script>

{% include 'app_data/_schema_help_modal.html' %}

{% include 'app_data/_field_info_popover_init.html' %}

{% endblock %}