{% extends "base.html" %}

{% load humanize %}
{% load staticfiles %}
{% load concordia_media_tags %}


{% block title %}
Things to Transcribe
{% endblock title %}

{% block head_content %}
    <link rel="canonical" href="https://{{ request.get_host }}{{ request.path }}">
{% endblock head_content %}

{% block breadcrumbs %}
    <li class="breadcrumb-item active" aria-current="page" title="Things to transcribe">Things to transcribe</li>
{% endblock breadcrumbs%}

{% block main_content %}
<div class="container py-3">
    <div class="row">
        {% include "fragments/activity-filter-sort.html" %}
    </div>

    <div class="row">
        {% include "fragments/standard-pagination.html" %}
    </div>

    <div class="card-deck justify-content-center align-items-center align-items-sm-stretch">
        {% for a in assets %}
            {% url 'transcriptions:asset-detail' a.item.project.campaign.slug a.item.project.slug a.item.item_id a.slug as asset_detail_url %}

            <div class="card concordia-object-card" data-transcription-status="{{ a.transcription_status }}">
                <a class="card-img-container" href="{{ asset_detail_url }}">
                    <img class="card-img" alt="{{ a.slug }}" src="{% asset_media_url a %}">
                </a>

                <a class="card-title" href="{{ asset_detail_url }}">
                    Score: {{ a.difficulty }}
                </a>

                <div class="card-actions">
                    <a class="btn btn-sm btn-block btn-default" href="{{ asset_detail_url }}">
                            <span class="fas fa-edit tx-edit"></span>
                            Transcribe
                    </a>
                </div>
            </div>
        {% endfor %}
    </div>

    <div class="row">
        {% include "fragments/standard-pagination.html" %}
    </div>
</div>
{% endblock main_content %}