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

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




{% block title %}
<h2><i class="fa {{ classobj.icon }}"></i> &nbsp; {{ classobj.displayname }}</h2>
  <small class="text-muted">{{ instances_count }} / {{ paginator.count }} {% translate "objects" %}</small>
<hr>
{% endblock %}


{% block content %}

<div class="d-flex">

  <div class="flex-grow-1 p-2">
    <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="p-2">   <!-- DATAVIEW -->
      <button class="btn btn-outline-success dropdown-toggle px-4 me-2" type="button" data-bs-toggle="dropdown">
        <i class="fa fa-lg fa-eye" aria-hidden="true"></i>&nbsp;
        {{ 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="mt-2">
    <div class="dropdown">
      
      <button class="btn btn-outline-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
        <i class="fa fa-lg fa-plus" aria-hidden="true"></i>&nbsp;
        {% translate 'Action' %}
      </button>

      <ul class="dropdown-menu">

        {% if ui_new %}
        <li>
          <a class="dropdown-item" href="{% url 'app_data:instance_new' classobj.keyname %}">
            {% 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 %}

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

</div>


<HR>

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

        {% if paginator.page_last > 1 %}
        <div class="mx-3 pt-3"> <!-- 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-3">
          <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' classobj.keyname %}?size={{s}}">
              {{s}}
            </a>
            {% endfor %}
          </div>
        </div>

        {% endif %}

      </div>
    </div>


<!-- DATA TABLE -->
<table id="table_unmanaged_search" class="table table-striped table-hover table-sm">
<thead class="thead-dark">
    <tr>
    {% for i in dataview.columns %}
        {% if i == 'keyname' %}<th>{% translate 'Keyname' %}</th>
        {% elif i == 'handle' %}<th>{% translate 'Handle' %}</th>
        {% elif i == 'displayname' %}<th>{% translate 'Display 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' classobj.keyname instance.handle|default:instance.keyname %}">
            {% 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 {{ classobj.icon }}"></i> &nbsp; {{ classobj.displayname }} ({{classobj.keyname}})</h4>
          <br>
          <input type="hidden" name="classname" value="{{ classobj.keyname }}">
          <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 %}