{% extends current_module.base_template %}
{% load i18n material_form material_frontend %}

{% block breadcrumbs_items %}
<a class="active" href="{% url view.model|frontend_urlname:'list' %}">{{ view.model|verbose_name_plural|title }}</a>
{% endblock %}


{% block footer %}
<script type="text/javascript">
  config = {{ datatable_config|safe }};
  config['ajax']['data'] = function(data) {
    var keys = Object.keys(data);
    for(var i=0; i<=keys.length; i++) {
      var key = keys[i],
          value = data[key];
      delete data[key];
      data['datatable-' + key] = value;
    }
  };
  config['ajax']['beforeSend'] = function(request) {
    request.setRequestHeader("datatable", true);
  };
  $(document).one("turbolinks:load", function() {
    if ( ! $.fn.DataTable.isDataTable( '#table' ) ) {
      var datatable = $('#table').DataTable(config);
      new $.fn.dataTable.FixedHeader(datatable);

      $(document).one("turbolinks:before-cache", function() {
        datatable.destroy();
      });
    }
  });
</script>
{% endblock %}

{% block content %}
{% block left-panel %}
<div class="left-panel">
    <div class="card list-card">
        <div class="card-content">
            <table id="table" class="table bordered" data-form-control="datatable" style="width:100%">
                <thead>
                    <tr>
                        {% for header, header_title in headers %}
                        <th data-name="{{ header }}" class="{{ header }}">{{ header_title|title }}</th>
                        {% endfor %}
                    </tr>
                </thead>
                <tbody>
                    {% for item, row in data %}
                    <tr>
                        {% for column_name, item in row.items %}
                        <td>
                            {% if column_name in view.datalist.list_display_links %}
                            <a href="#">{{ item }}</a>
                            {% else %}
                            {{ item }}
                            {% endif %}
                        </td>
                        {% endfor %}
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>
{% endblock left-panel %}
{% block right-panel %}{% endblock right-panel %}
{% block action_btn %}
<div class="fixed-action-btn">
    {% if add_url %}
      <a class="btn-floating btn-large waves-effect waves-light red z-depth-2" href="{{ add_url }}"><i class="large material-icons">add</i></a>
    {% endif %}
</div>
{% endblock %}
{% endblock %}
