{% extends "base.html" %}

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

{% block title %} {{ item.title }} ({{ campaign.title }}: {{ project.title }}) {% endblock title %}

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

{% block breadcrumbs %}
    <li class="breadcrumb-item"><a class="primary-text" href="{% url 'campaign-topic-list' %}">Campaigns</a></li>
    <li class="breadcrumb-item"><a class="primary-text" href="{% url 'transcriptions:campaign-detail' campaign.slug %}?{{ sublevel_querystring }}" title="{{ campaign.title }}">{{ campaign.title }}</a></li>
    <li class="breadcrumb-item"><a class="primary-text" href="{% url 'transcriptions:project-detail' campaign.slug project.slug %}?{{ sublevel_querystring }}" title="{{ project.title }}">{{ project.title }}</a></li>
    <li class="breadcrumb-item active" aria-current="page" title="{{ item.title }}">{{ item.title|truncatechars:40 }}</li>
{% endblock breadcrumbs%}

{% block main_content %}
{% flag_enabled 'DISPLAY_ITEM_DESCRIPTION' as DISPLAY_ITEM_DESCRIPTION %}

    <div class="container py-3">
        <div class="row">
            <div class="col-md-10">
                <h1>{{ item.title }}</h1>
                {% if DISPLAY_ITEM_DESCRIPTION %}
                <div class="m-3 hero-text">{{ item.description|safe }}</div>
                {% endif %}
            </div>
            <div class="col-md-2 align-bottom">
                <div>
                    <a href="{{ item.item_url }}" class="btn btn-default" title="View the original source for this item in a new tab" target="_blank">View this item on www.loc.gov<i class="fa fa-external-link-alt"></i></a>
                </div>
            </div>
        </div>
        {% include "fragments/transcription-progress-row.html" %}
        <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 }}">
                        #{{ a.sequence }}
                    </a>
                    <div class="card-actions">
                        <a class="btn btn-sm btn-block btn-default" href="{{ asset_detail_url }}">
                            {% if a.transcription_status == 'submitted' %}
                                <span class="fas fa-list tx-submitted"></span>
                                Review
                            {% elif a.transcription_status == 'completed' %}
                                <span class="fas fa-check tx-completed"></span>
                                Complete
                            {% else %}
                                <span class="fas fa-edit tx-edit"></span>
                                Transcribe
                            {% endif %}
                        </a>
                    </div>
                </div>
            {% endfor %}
        </div>
        <div class="row">
            {% include "fragments/standard-pagination.html" %}
        </div>
    </div>
{% endblock main_content %}