{% load humanize %}

<div id="contributor-stats">
    {{ contributor_count|intcomma }}
    contributor{{ contributor_count|pluralize}}
</div>

<div id="progress-bar" class="progress">
    <div title="Completed ({{ completed_count|intcomma }} page{{ completed_count|pluralize }})" class="progress-bar bg-completed" role="progressbar" style="width: {{ completed_percent }}%" aria-valuenow="{{ completed_percent }}" aria-valuemin="0" aria-valuemax="100">
    </div>
    <div title="Needs Review ({{ submitted_count|intcomma }} page{{ submitted_count|pluralize }})" class="progress-bar bg-submitted" role="progressbar" style="width: {{ submitted_percent }}%" aria-valuenow="{{ submitted_percent }}" aria-valuemin="0" aria-valuemax="100">
    </div>
    <div title="In Progress ({{ in_progress_count|intcomma }} page{{ in_progress_count|pluralize }})" class="progress-bar bg-in_progress" role="progressbar" style="width: {{ in_progress_percent }}%" aria-valuenow="{{ in_progress_percent }}" aria-valuemin="0" aria-valuemax="100">
    </div>
</div>
<div class="table-responsive-md">
    <table id="progress-stats" class="table table-sm font-weight-light">
        <tbody>
            {% for key, label, value in transcription_status_counts reversed %}
                <tr class="{% if filters.transcription_status == key %}table-secondary{% endif %}">
                    <th class="text-nowrap">
                        <a href="?transcription_status={{ key|urlencode }}">
                            <span class="transcription-status-key bg-{{ key }}"></span>
                            {{ label }}
                        </a>
                    </th>
                    <td class="text-right">
                        <a href="?transcription_status={{ key|urlencode }}">
                            <abbr title="{{ value|intcomma }} pages">{{ value|intcomma }}</abbr>
                        </a>
                    </td>
                </tr>
            {% endfor %}
        </tbody>
    </table>
</div>