{% load counter_tag %}
  {% if user|usergperm:"moduleorganizer" %} 
  <div class="row">
    <div class="content-section col-4">
      <!--<a class="btn btn-primary" href="{% url 'ql-addql' %}"><i class="fas fa-plus"></i>&nbsp;Quicklink</a>-->
    </div>
  </div>
  {% endif %}
  <!--<hr>-->
   <div class="content-section col-12">
    <div class="table-responsive">
    <table class="table table-hover" id="qltable">
          <thead>
          <tr>
            <th scope="col">Name</th>
            <th scope="col">Link</th>
            <!--<th scope="col">Logo</th>  -->
            {% if user|usergperm:"moduleorganizer" %}      
            <th scope="col">&nbsp;</th>
            {% endif %}
          </tr>
        </thead>
        <tbody id="table_quicklinks">
        {% for ql in quicklinks %}
          <tr>
              <td>{{ql.name }}</td>
              <td><a href="{{ ql.link }}" target="_blank">{{ ql.link }}</a></td>              
              <!--<td><img src="{{ ql.get_photo_url }}" width="15%"></td>              -->
              {% if user|usergperm:"moduleorganizer" %}
              <td>
              	{% if user|usergperm:"moduleorganizer" %} 
                <a style="float: right" class="btn btn-secondary btn-sm ml-2" href="{% url 'ql-delete' ql.pk%}">
                <small>
                <i class="fas fa-trash"></i></small></a>

                <a style="float: right" class="btn btn-secondary btn-sm " href="{% url 'ql-update' ql.pk%}">
                <small>
                <i class="fas fa-pen"></i>
                </small></a>
                  {% endif %}                
              </td> 
              {% endif %}             
          </tr>
        {% endfor %}   
        </tbody>  
      </table>
     <!-- {% if user|usergperm:"moduleorganizer" %} 
        <a class="btn btn-primary" href="#" onclick="saveDefQL()">ERGO-Quicklinks laden</a>
      {% endif %}-->
    </div>
</div>
<script>

$(document).ready(function(){
  
  $('#qltable').DataTable({
      "language": {
        "search" : "Suche",
        "info": "Zeige _START_ bis _END_ von _TOTAL_ Einträgen",
        "lengthMenu":     "Zeige _MENU_ Einträge",
        "zeroRecords": "Nichts gefunden",
        "infoEmpty": "Keine Einträge",
        "paginate": {
            "first":      "Erste",
            "last":       "Letzte",
            "next":       "Nächste",
            "previous":   "Zurück"
        },
      },
      "buttons" : {
        "className" : "btn-danger"
      }
    });
  
});



function saveDefQL(){
  /*
  $.ajax(
      {
          type: "GET",
          url: "lerg/",
          data:{
            action: "adddefql"
          },
          success: function( data ) 
          {
            location.reload();
        }
       });*/
}
</script>

<style>
  /* DATATABLES */
.paginate_button {
  padding: 0px !important;
  border: 0px !important;
}
  </style>