{% extends parentTemplate %}

{% block head %}

<style>
i.dbedit {
  font-size: 18px;
}
</style>

<script>
  function setGetParam(paramMap, hashOrFragment) {

    var params = new URLSearchParams(window.location.search);
    for (key in paramMap) {
      var paramVal = paramMap[key];
      if (paramVal) {
        params.set(key, paramVal);
      } else {
        params.delete(key);
      }
    }

    var fragmentStr = "";
    if (hashOrFragment) {
      fragmentStr = "#" + hashOrFragment;
    } else if (window.location.hash) {
      fragmentStr = window.location.hash;
    }

    var newUrl = window.location.protocol + "//" + window.location.host + window.location.pathname + '?' + params.toString() + fragmentStr;

    if (window.location.href == newUrl) {
      window.location.reload(true);
    } else {
      window.location.href = newUrl;
    }

  }

  function getAllSearchInput() {
    return $('#frmSearch').find("input[type=text], input[type=hidden], textarea, select");
  }

  function goSearch() {
    var paramMap = {};
    getAllSearchInput().each(function() {
      var jObj = $(this);
      var name = jObj.attr('name');
      if (name) {
        paramMap[jObj.attr('name')] = jObj.val();
      }
    });

    // reset page number to 1
    paramMap['{{tableId}}_p'] = '1';

    setGetParam(paramMap, 'SEARCH_LOC');
  }


  function goSortColumn(col, sortVal, tableId) {

    var paramMap = {};

    var sortMap = {};
    sortMap[col] = sortVal;

    paramMap['sort'] = JSON.stringify(sortMap);
    paramMap['{{tableId}}_p'] = '1';

    setGetParam(paramMap, 'TABLE_LOC');
  }

  function goClearSearch() {
    getAllSearchInput().each(function() {
      $(this).val('');
    });
    
    goSearch();
  }

  function goSort() {
    setGetParam({'sort': document.getElementById('SORT').value});
  }

  function showSearchFields(isShown, doNotFocus) {
    $('#frmSearch').css('display', isShown ? '' :'none' );

    if (isShown) {
      if (!doNotFocus) {
        $('#frmSearch').find(':input:enabled:visible:first').focus();
      }
      $('#show-search-caret').addClass('fa-caret-down');
      $('#show-search-caret').removeClass('fa-caret-right');
    } else {
       
      $('#show-search-caret').addClass('fa-caret-right');
      $('#show-search-caret').removeClass('fa-caret-down');
    }
  }

  function changeRowsPerPage(rowsPerPageVal, tableId) {
    if (isNaN(rowsPerPageVal)) {
      return;
    }

    var paramMap = {};
    paramMap[tableId + '_rowsPerPage'] = rowsPerPageVal;
    paramMap['{{tableId}}_p'] = '1';
    setGetParam(paramMap);
  }

  function onChangeRowsPerPage(tableId) {
    var rowsPerPageVal = $('#S_ROWS_PER_PAGE').val();
     
    changeRowsPerPage(rowsPerPageVal, tableId);
  }

  function toggleSearchDisplay() {
    showSearchFields($('#frmSearch').css('display') === 'none');
  }

</script>
{% endblock %}

{% block content %}
{{super()}}

{% block afterPageTitle %} {% endblock %}

{%if showAddButton%}
<p>
  <a class="btn btn-primary" href="{{addUrl}}?{%if queryModelName%}model={{queryModelName}}&{%endif%}_backUrl={{redirectAfter}}{{saveParams}}"><i class="fa fa-plus fa-fw"></i> Add {{modelDisplayName}}</a>
</p>
{%endif%}

{%if searchable.visibleLength > 0%}

<a name="SEARCH_LOC"></a>

<div><button id="show-search-btn" class="btn btn-link p-0 pb-2" type="button" onclick="toggleSearchDisplay();" style="text-decoration: none;"><i id="show-search-caret" class="fa fa-caret-right" style="position: relative; width: 10px; text-align: left;"></i> Show Search</button></div>


<form id="frmSearch" name="frmSearch" style="{%if not searchable.hasSearchVal%}display: none;{%endif%} {{searchableStyle}}">
  
          
    {%for searchObj in searchable%}

      {%if not searchObj.hiddenComputed%}

        {%if searchObj.attachToPrevious%}
          </div><div class="form-group col">
        {%else%}
          {%if loop.index != 1%}</div></div>{%endif%}

          <div class="form-row">
          <div class="form-group col">
        {%endif%}

       
              <label for="f_{{searchObj.id}}">{{searchObj.label}}</label>
          {%if searchObj.inputType == "select"%}
            <select class="form-control" name="f_{{searchObj.id}}" id="f_{{searchObj.id}}">
              {%for key, val in searchObj.inputValuesComputed%}
              <option value="{{key}}"{%if (searchObj.val.equals and searchObj.val.equals(key) or (searchObj.val == key))%} selected{%endif%}>{{val}}</option>
              {%endfor%}
            </select>
          {%elif searchObj.inputType == "termField"%}
            {{ forms.termField("f_" + searchObj.id, {value: searchObj.val, descType:searchObj.descType}) }}
          {%elif searchObj.inputType == "acadYearField"%}
            {{ forms.acadYearField("f_" + searchObj.id, {value: searchObj.val}) }}
          {%else%}
              <input type="text" name="f_{{searchObj.id}}" id="f_{{searchObj.id}}" class="form-control" placeholder="{{searchObj.placeholder}}" value="{{searchObj.val}}" />
          {%endif%}
          
        

        {%endif%}

        {%if loop.last%} 
        </div></div>
        {%endif%}
        
      {%endfor%}
      
      
      
      

      <div class="row">
        <div class="col-md">
          <button class="btn btn-outline-primary" type="submit" onclick="goSearch(); return false;"><i class="fa fa-search"></i> </span> Search</button>

        <button class="btn btn-outline-secondary" type="button" onclick="goClearSearch(); return false;" style="float: right;">Clear</button>
        </div>
      </div>


</form>
{%if searchable.hasSearchVal%}
<script type="text/javascript">
  $(function() {
    showSearchFields(true, true);
  })
</script>
{%endif%}

<br/>

{%endif%}

{% block afterSearch %}{% endblock %}
<a name="TABLE_LOC"></a>

<div class="clearfix">
  {{table | safe}}

  <div class="form-inline pull-right" style="margin-bottom: 12px; display: inline-block;">
    {%if showExport%}
    <form method="post" class="form-inline" style="display: inline;">
      <input type="hidden" name="_csrf" value="{{_csrf}}">

      <button name="_ACTION_EXPORT_CSV" class="btn btn-link btn-sm" type="submit">Export to CSV</button>
    </form>
    |
    {%endif%}
    Total: {{count | formatNum}} 
    | 
    Rows Per Page: <select class="form-control form-control-sm" id="S_ROWS_PER_PAGE" onchange="onChangeRowsPerPage('{{tableId}}')">

      {%for rowCount in rowsPerPageSelectVals%}
      <option value="{{rowCount}}"{%if rowsPerPage == rowCount%} selected{%endif%}>{{rowCount.toLocaleString()}}</option>
      {%endfor%}
    </select>
    
  </div>

</div>


{% endblock %}