{% extends "interface/project_base.html" %}
{% load md2 %}

{% block admin %}
<a class="button is-link" href="{% url 'resource_create' project=project.pk %}">
    <span class="icon"><i class="fas fa-plus-circle"></i></span>
    <span>Add new</span>
</a>
{% endblock %}

{% block page %}
<h3 class="subtitle">Resources</h3>
<div class="columns is-multiline">
{% for resource in object_list %}
    {% with download=resource.file.url %}
    <div class="column is-half">
        <div class="card {% if not object.visible %}disabled{% endif %}">
            <div class="card-header">

                <div class="card-header-title">
                    {% if download %}
                    <a href="{{ download }}">{{ resource.name }}</a>
                    {% else %}
                    {{ resource.name }}
                    {% endif %}
                </div>

                <div class="card-header-icon">
                    {% if request.is_admin %}
                    <a href="{% url 'resource_upload' project=project.pk pk=resource.pk %}" class="icon" title="Upload">
                        <i class="fas fa-upload"></i>
                    </a>
                    <a href="{% url 'resource_edit' project=project.pk pk=resource.pk %}" class="icon" title="Edit">
                        <i class="fas fa-edit"></i>
                    </a>
                    {% endif %}
                </div>
            </div>
            <div class="card-content">
            <p>
                <small>{{ resource.description|markdown }}</small>
                {% if not resource.visible %}
                <br/>(This resource is hidden from participants)
                {% endif %}
            </p>
            {% if download and resource.media_type == 'audio' %}
                <audio class="resource-player" controls src="{{ download }}" style="width: 100%;"></audio>
            {% endif %}
            </div>
        </div>
    </div>
    {% endwith %}
{% empty %}
    <div class="column">
    <p>There are no resources for this project</p>
    </div>
{% endfor %}
</div>
{% endblock %}