{% load guardian_tags %}

{% load community_utils %}
{% load bootstrap_helpers %}
{% load uploaded_material %}
{% load sekizai_tags %}

{% spaceless %}
  {% if user|can_view_material:material %}
    <li class="list-group-item list-group-item-action list-group-item-light d-flex">
      <div
        title="{{ material.name }}"
        data-bs-toggle="popover"
        data-bs-content="{% if material.upload_material %}<a href='{{ material.upload_material.url }}' class='btn-download mx-2'>Download</a>{% endif %}{% if material.external_url %}<a href='{{ material.external_url }}' class='mx-2'><i class='fas fa-external-link-alt'></i> Access on external site</a>{% endif %}{% if material.content %}<a href='{{ material.get_absolute_url }}' class='mx-2'><i class='fas fa-eye'></i> View content</a>{% endif %}<br><b>License:</b> {{ material.license }}"
        data-bs-html="true"
        data-bs-placement="top"
        role="button"
        class="w-100 p-2">
        <h5 class="mb-1">{% if truncate_name %}{{ material.name|truncatechars:20 }}{% else %}{{ material.name }}{% endif %}</h5>
        <div class="d-flex w-100 justify-content-between">
          <small><i class="far fa-clock"></i> {{ material.last_modification_date|date }}</small>
          <div>
            {% materialcategory_badge material.relation %}
            {% for keyword in material.keywords.all %}
              {% materialkeyword_badge keyword material.relation %}
            {% endfor %}
          </div>
        </div>
      </div>

      <div class="dropdown material-menu-button flex-shrink-1 align-self-start">
        <a class="btn btn-round btn-light btn-menu" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
        </a>

        <ul class="dropdown-menu">
          <li><h6 class="dropdown-header">{{ material.name }}</h6></li>
          <li>
            <a href="{{ material.relation.get_absolute_url }}?next={% url_for_next %}" role="button" class="dropdown-item btn btn-details">
              View content
            </a>
          </li>
          {% if material.upload_material %}
            <li>
              <a href="{{ material.upload_material.url }}" role="button" class="dropdown-item btn btn-download">
                Download
              </a>
            </li>
          {% endif %}
          {% if material.external_url %}
            <li>
              <a href="{{ material.external_url }}" role="button" class="dropdown-item btn btn-external">
                Access on external site
              </a>
            </li>
          {% endif %}
          {% if user|can_change_material:material %}
            <li>
              <a href="{{ material.relation.get_edit_url }}?next={% url_for_next %}" role="button" class="dropdown-item btn btn-edit">
                Edit
              </a>
            </li>
          {% endif %}
          {% if user|can_delete_material:material %}
            <li><hr class="dropdown-divider"></li>
            <li>
              <a href="{{ material.relation.get_delete_url }}{% if not material.relation.get_absolute_url|same_url:request.path %}?next={% url_for_next %}{% endif %}" role="button" class="btn link-danger dropdown-item">
                <i class="far fa-trash-alt"></i> Delete
              </a>
            </li>
          {% endif %}
          <li><hr class="dropdown-divider"></li>
          <li class="p-2"><b>License:</b> {{ material.license }}</li>
        </ul>
      </div>
    </li>

  {% endif %}
{% endspaceless%}


{% addtoblock "js" %}

  <script>
    $(document).ready(function() {
      var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
      var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
          return new bootstrap.Popover(popoverTriggerEl)
        })
      })
  </script>

{% endaddtoblock %}
