{% extends "users/base.html" %}
{% load counter_tag %}

{% block content %}
<div class="content-section col-12">
  <h3>Standards&nbsp;<small><i data-toggle="tooltip" data-placement="top" title="Standards dokumentieren und erläutern verschiedenen Verfahren, strukturiert nach Bereichen und Aufgaben." class="far fa-question-circle"></i></small></h3>
  <small>Sichtbar sind alle veröffentlichten und von {{ user.first_name }} {{ user.last_name}} erstellten Standards.</small>
  <hr>
  <div class="row">
    <div class="content-section col-4">
      <a class="btn btn-primary" href="{% url 'standard-add' %}"><i class="fas fa-plus"></i>&nbsp;Standard</a>
    </div>
  </div>
  <hr>
  <div class="row">
    <div class="col-12">
    <ul class="nav nav-tabs" id="area_tabs" role="tablist">
      {% for area in areas %}        
      <li class="nav-item">
          <a class="nav-link" id="{{area.id}}" data-toggle="tab" href="#t_{{area.id}}" role="tab" aria-controls="t_{{area.id}}" aria-selected="false">{{area.name}}</a>
      </li>
      {% endfor %}  
      <li class="nav-item">
          <a class="nav-link" id="userown" data-toggle="tab" href="#t_userown" role="tab" aria-controls="t_userown" aria-selected="false">Eigene Standards</a>
      </li> 
      {% if perms.users.standard_management %}
      <li class="nav-item">
          <a class="nav-link" id="agencys" data-toggle="tab" href="#t_agencys" role="tab" aria-controls="t_agencys" aria-selected="false">Unveröffentlichte Standards</a>
      </li>      
      {% endif %}
    </ul>
  </div>
  <div class="col">
    <div class="tab-content" id="area_contents">      
      {% for area in areas %}
        <div class="tab-pane fade" id="t_{{area.id}}" role="tabpanel" aria-labelledby="{{area.id}}">
            <h5 class="mt-3"><a href="{% url 'standard-area' area.id %}" style="color: #000000;">Standards aus dem Bereich {{area.name}}</a></h5>
            <hr>            
          {% for task in tasks %}          

            {% if task.area == area %}            
            <div class="card text-center mt-1 mr-3 mb-3" style="width: 18rem; height: 12rem; float: left">
                  <div class="card-body">
                    {% setvar 0 %}
                    {% for standard in standards_of_agency %}   
                    {% getvar as varcounter %}                        
                    {% if standard.task == task and standard.area == area%}                                                  
                    {% incvar %}                          
                    {% endif %}                      
                    {% endfor %}
                    {% getvar as varcounter %}
                    <h5 class="card-title">
                      <a href="{% url 'standard-task' task.pk %}" style="color: #000000;">{{task.name}}</a>&nbsp;<small>({{varcounter}})</small>
                    </h5>      
                    {% setvar 0 %}
                    {% for standard in standards_of_agency %}   
                        <!-- CHECK FOR GROUPVISIBLE -->
                        {% setbool False %}
                        {% for ag in standard.visibleby.all %}
                          {% if request.user|has_group:ag.group.name %}   
                            {% setbool True %}                  
                            {% endif %}
                        {% endfor %}

                        {% if standard.visibleby.all|length == 0 %}
                          {% setbool True %}  
                        {% endif %}
                        {% getbool as groupchecker %}
                        
                        {% getvar as varcounter %}                        
                        {% if standard.task == task and standard.area == area and varcounter < 3 %}                                                  
                        {% incvar %}
                          {% if groupchecker %}
                          <p class="card-text"><a href="{% url 'standard-single' standard.pk %}">{{standard.name|truncatechars:28}}</a></p>
                          {% else %}                          
                          <p class="card-text text-secondary"><i class="fas fa-lock"></i>&nbsp;{{standard.name|truncatechars:28}}</p>
                          {% endif %}                          
                        {% endif %}                      
                    {% endfor %}                    
                   </div>
                </div>
          {% endif %}          
        {% endfor %}           
       </div>        
      {% endfor %}
      <div class="tab-pane fade" id="t_userown" role="tabpanel" aria-labelledby="userown">
        <h4 class="mt-4 mb-4">Ihre Standards</h4>
         <div class="form-group mb-2">      
          <input class="form-control" id="tableSearch" size="20" type="text" placeholder="Suche in Tabelle...">
        </div>
        <div class="table-responsive">        
          <table class="table table-hover">
              <thead>
              <tr>
                <th scope="col">Titel</th>
                <th scope="col">Erstellt am</th>
                <th scope="col">Geändert von</th>
                <th scope="col">Geändert am</th>
                <th scope="col">Öffentlichkeitsstatus</th>
                <th scope="col">&nbsp;</th>
              </tr>
            </thead>
             <tbody id="tableresults">
          {% for standard in standards_of_user %}
          <tr>
              <td><a href="{% url 'standard-single' standard.pk %}">{{standard.name}}</a></td>
              <td>{{standard.created_standard_date|date:"d.m.Y, H:i"}}</td>
              <td>{{standard.last_modified_by.first_name}} {{standard.last_modified_by.last_name}}</td>
              <td>{{standard.last_modified_on|date:"d.m.Y, H:i"}}</td>
              <td>{{standard.public|yesno:"Öffentlich,Nicht öffentlich"}}</td>
              <td>
                 <div class="dropdown no-arrow">
                <a class="dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  <i class="fas fa-ellipsis-v fa-sm fa-fw text-gray-400"></i>
                </a>
                <div class="dropdown-menu dropdown-menu-right shadow animated--fade-in" aria-labelledby="dropdownMenuLink">
                    {% if perms.users.standard_management %}
                      {% if standard.public %}
                        <a class="dropdown-item" href="{% url 'standard-status' standard.pk %}">Veröffentlichung aufheben</a> 
                      {% else %}
                      <a class="dropdown-item" href="{% url 'standard-status' standard.pk %}">Veröffentlichen</a>
                      {% endif %}
                    {% endif %}
                    {% if standard.created_standard_by == request.user or perms.users.standard_management %}
                     <a class="dropdown-item" href="{% url 'standard-update' standard.pk %}">Bearbeiten</a>                     
                    {% endif %}                                       
                    <div class="dropdown-divider"></div>       
                    <a class="dropdown-item text-danger" href="{% url 'standard-delete' standard.pk %}" >Löschen</a>
                 </div>
               </div>
              </td>
          </tr>
          {% endfor %}  
          </tbody>      
          </table>

        </div>
       </div> 
       <div class="tab-pane fade" id="t_agencys" role="tabpanel" aria-labelledby="userown">
        <h4 class="mt-4 mb-4">Unveröffentlichte Standards</h4>
         <div class="form-group mb-2">      
          <input class="form-control" id="tableSearch_s" size="20" type="text" placeholder="Suche in Tabelle...">
        </div>
        <div class="table-responsive">        
          <table class="table table-hover">
              <thead>
              <tr>
                <th scope="col">Titel</th>
                <th scope="col">Erstellt am</th>
                <th scope="col">Geändert von</th>
                <th scope="col">Geändert am</th>
                <th scope="col">Öffentlichkeitsstatus</th>
                <th scope="col">&nbsp;</th>
              </tr>
            </thead>
             <tbody id="tableresults_s">
          {% for standard in unpubstandards_of_user %}
          <tr>
              <td><a href="{% url 'standard-single' standard.pk %}">{{standard.name}}</a></td>
              <td>{{standard.created_standard_date|date:"d.m.Y, H:i"}}</td>
              <td>{{standard.last_modified_by.first_name}} {{standard.last_modified_by.last_name}}</td>
              <td>{{standard.last_modified_on|date:"d.m.Y, H:i"}}</td>
              <td>{{standard.public|yesno:"Öffentlich,Nicht öffentlich"}}</td>
              <td>
                 <div class="dropdown no-arrow">
                <a class="dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  <i class="fas fa-ellipsis-v fa-sm fa-fw text-gray-400"></i>
                </a>
                <div class="dropdown-menu dropdown-menu-right shadow animated--fade-in" aria-labelledby="dropdownMenuLink">
                    {% if perms.users.standard_management %}
                      {% if standard.public %}
                        <a class="dropdown-item" href="{% url 'standard-status' standard.pk %}">Veröffentlichung aufheben</a> 
                      {% else %}
                      <a class="dropdown-item" href="{% url 'standard-status' standard.pk %}">Veröffentlichen</a>
                      {% endif %}
                    {% endif %}
                    {% if standard.created_standard_by == request.user or perms.users.standard_management %}
                     <a class="dropdown-item" href="{% url 'standard-update' standard.pk %}">Bearbeiten</a>                     
                    {% endif %}                                       
                    <div class="dropdown-divider"></div>       
                    <a class="dropdown-item text-danger" href="{% url 'standard-delete' standard.pk %}" >Löschen</a>
                 </div>
               </div>
              </td>
          </tr>
          {% endfor %}  
          </tbody>      
          </table>

        </div>
       </div> 
     </div>
    </div>    
  </div>
  <script type="text/javascript">

    console.log();

    $(document).ready(function(){
        $('#area_tabs li:first-child a').tab('show');

        $("#tableSearch").on("keyup", function() {
        var value = $(this).val().toLowerCase();
        $("#tableresults tr").filter(function() {
          $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
        });
        });

        $("#tableSearch_s").on("keyup", function() {
        var value = $(this).val().toLowerCase();
        $("#tableresults_s tr").filter(function() {
          $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
        });
        });
    })
    

    $('#area_tabs a').on('click', function (e) {
      e.preventDefault()
      $(this).tab('show')
    });

  </script>
{% endblock content %}