{% comment %}

Card with quality control metrics

Input:
- title
- description
- img_url

{% endcomment %}

{% load string_extras %}

<style>
    .card figcaption {
        backdrop-filter: blur(4px);
        transition: opacity 0.3s ease
    }

    .card-body:hover figcaption {
        opacity: 1 !important;
    }

    .card-qc {
        background-position:center;
        background-size:cover;
    }

    .item-description {
        text-decoration: underline;
        text-decoration-style: dotted;
    }

    .card-qc-{{ img_url|hash }} {
        background-image: url('{{ img_url }}?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
    }
</style>

<div>
    <div class="card">
        <div class="card-body card-qc card-qc-{{ img_url|hash }} text-white text-bg-dark position-relative card-img-top">
            <h3 class="h6 card-title text-shadow">{{ title }}</h3>
            <p class="card-text text-shadow mb-4">{{ description }}</p>

            <figcaption class="w-100 position-absolute text-end text-dark bottom-0 start-0 py-2 px-4 bg-white bg-opacity-75 opacity-0 small">
                Photo by
                {% if img_source == "Unsplash" and img_author_handle %}
                    <a target="_blank" href="https://unsplash.com/{{ img_author_handle }}">{{ img_author }}</a>
                {% else %}
                    {{ img_author }}
                {% endif %}
            </figcaption>
        </div>

        <ul class="list-group list-group-flush">
            {% for metric in metrics %}
                <li class="list-group-item"
                    {% if metric.description %} data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="{{ metric.description }}" {% endif %}>
                    <span {% if metric.description %}class="item-description"{% endif %}>{{ metric.name }}</span>
                    {% load string_extras %}
                    <span class="float-end text-secondary">{{ metric.value|intspace }}</span>
                </li>
            {% empty %}
                <li class="list-group-item text-secondary">
                    <i class="fa fa-warning"></i>
                    No metrics available
                </li>
            {% endfor %}
        </ul>
    </div>
</div>