{% extends 'default/templates/renderable/administerable.html' %}

{% block content %}
    <a
        class="url"
        href="{{ content.url }}"
        target="_blank"
        rel="noreferrer noopener"
        style="background-image: url('/theme/dynamic/scoredlink/{{ content.id }}/');"
        title="This URL loads data from {{ content.external_site_count }} external sites (median: {{ content.median }}, mean: {{ content.mean }}, min {{ content.min }}, max: {{ content.max }}, set size: {{ content.set_size }})"
    >{{ content.url }}</a>
    <ul class="fields">
        <li class="field external-site-count">

            <span class="name">External site count</span>
            <span class="value" style="color: {{ content.color.css() }};">
                {% if content.external_site_count is none %}
                    unknown
                {% else %}
                    {{ content.external_site_count }}
                {% endif %}
            </span>

            <input id="scoredlink-{{ content.id }}-external-site-count-toggle" class="toggle-input" type="checkbox" />
            <label for="scoredlink-{{ content.id }}-external-site-count-toggle" class="toggle-label" title="{{ content.__class__.explanation_external_site_count }}">?</label>
            <div class="explanation">

                {{ content.__class__.explanation_external_site_count.render() }}

                <span>The statistical spread of our dataset currently looks like this:</span>
                <ul class="statistic-info">
                    <li class="stat"><span>Median:</span> <span class="value">{{ content.median }}</span></li>
                    <li class="stat"><span>Mean:</span> <span class="value">{{ content.mean }}</span></li>
                    <li class="stat"><span>Min:</span> <span class="value">{{ content.min }}</span></li>
                    <li class="stat"><span>Max:</span> <span class="value">{{ content.max }}</span></li>
                    <li class="stat"><span>Set size:</span> <span class="value">{{ content.set_size }}</span></li>
                </ul>
            </div>

        </li>

        <li class="field last-scrape">
            <span class="name">Last scrape</span>
            <span class="value">{{ content.last_scrape|prettydate or 'never' }}</span>
        </li>

    </dl>
{% endblock %}