{% 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']['beforeSend'] = function(request) {
    request.setRequestHeader("datatable", true);
  };
  config['columnDefs'] = [
    {
      "targets": {{ view.datalist.list_display_links|safe }},
      "render": function ( data, type, full, meta ) {
        if(full.view_url) {
          return "<a href='"+ full.view_url + "'>" + data+ "</a>";
        } else {
          return data;
        }
      },
    }
  ];
  $(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 %}
<div class="row frontend-list">
    <div class="col s12 m12 l9">
        <div class="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>

    {% block action_btn %}
    <div class="fixed-action-btn">
        {% url view.model|frontend_urlname:'add' as 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>
    </div>
    {% endblock %}
</div>
{% endblock %}
