{% 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="" style="display: inline-flex;" action="" method="post"> {% csrf_token %}
        <button class="btn btn-success me-2" type="submit" id="search">
          <i class="fa fa-lg fa-search"></i>
        </button>
        <input type="text" class="form-control" style="display: inline;" size="120" placeholder="{% translate 'search...' %}" 
        name="query" value="{{ query }}">
    </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>

<!-- DATA TABLE -->
<table id="table_unmanaged_search" class="table table-striped table-hover table-sm table-bordered">
<thead class="thead-dark">
    <tr>
    {% 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>  <!-- line -->
    {% 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>



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


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





{% endblock %}
