{% extends '_layout.html' %}

{% macro render_pagination(pagination, endpoint) %}
    <nav class="pagination is-rounded" role="navigation" aria-label="pagination">
        <a href="{{ url_for(endpoint, project_id=project.id, page=current_page - 1, per_page=per_page) }}"
           class="pagination-previous" {% if not documents.has_previous %}disabled{% endif %}>Previous</a>

        <a href="{{ url_for(endpoint, project_id=project.id, page=current_page + 1, per_page=per_page) }}"
           class="pagination-next" {% if not documents.has_next %}disabled{% endif %}>Next page</a>

        <ul class="pagination-list">
            {%- for page in pagination.iter_pages() %}
                {% if page %}
                    {% if page != pagination.page %}
                        <li><a href="{{ url_for(endpoint, project_id=project.id, page=page, per_page=per_page) }}"
                               class="pagination-link" aria-label="Goto page {{ page }}">{{ page }}</a></li>
                    {% else %}
                        <li><a href="{{ url_for(endpoint, project_id=project.id, page=page, per_page=per_page) }}"
                               class="pagination-link is-current" aria-label="Page {{ page }}"
                               aria-current="page">{{ page }}</a></li>
                    {% endif %}
                {% else %}
                    <li><span class="pagination-ellipsis">&hellip;</span></li>
                {% endif %}
            {% endfor %}
        </ul>
    </nav>
{% endmacro %}

{% block is_full_content %}
    <section class="section">
        <div class="container p-6">
            <!-- Header -->
            <div class="block">
                <h1 class="title has-text-centered">{{ project.name }}
                    <a href="/projects/{{ project.id }}/annotate" class="button is-primary is-outlined">
                        <span class="icon">
                            <i class="fas fa-tag"></i>
                        </span>
                    </a>
                </h1>
                <h2 class="subtitle has-text-centered">{{ project.description }}</h2>
            </div>
            <!-- Information -->
            <div class="block">
                <nav class="level">
                    <div class="level-item has-text-centered">
                        <div>
                            <p class="heading">Total</p>
                            <p class="title">{{ project_status.num_assigned }}</p>
                        </div>
                    </div>
                    <div class="level-item has-text-centered">
                        <div>
                            <p class="heading">Completed</p>
                            <p class="title">{{ project_status.num_completed }}</p>
                        </div>
                    </div>
                    <div class="level-item has-text-centered">
                        <div>
                            <p class="heading">Remaining</p>
                            <p class="title">{{ project_status.num_assigned - project_status.num_completed }}</p>
                        </div>
                    </div>
                    <div class="level-item has-text-centered">
                        <div>
                            <p class="heading">Progress</p>
                            <p class="title">{{ '%d' | format(project_status.progress) }}%</p>
                        </div>
                    </div>
                </nav>
            </div>
            <!-- Progress <div class="block">
                <progress class="progress is-dark" value="{{ project_status.progress }}"
                          max="100">{{ project_status.progress }}%
                </progress>
            </div> -->
            <!-- Label items -->
            <div class="block">
                <div class="is-flex flex-wrap is-justify-content-center">
                    {% for k, v in project_status.num_annotations.items() %}
                        <p class="heading pr-3">{{ v[0] }}-{{ v[1] }}</p>
                        {% if not loop.last %}<p class="heading pr-3">/</p>{% endif %}
                    {% endfor %}
                </div>
            </div>
        </div>
        <div class="container p-6 box">
            <!-- Annotated documents table -->
            <div class="block">
                <div class="table-container">
                    <table class="table is-fullwidth">
                        <thead>
                        <tr>
                            <th>#</th>
                            <th>Text</th>
                            <th>Action</th>
                        </tr>
                        </thead>
                        <tbody>
                        {% for d in documents.items %}
                            <tr>
                                <th scope="row">{{ d.id }}</th>
                                <td> {{ d.text | safe }}</td>
                                <td><a class="button" href="{{ project.id }}/annotate/{{ d.id }}">
                                    <i class="fas fa-tag"></i>
                                </a></td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
                <div class="d-flex justify-content-center">
                    {{ render_pagination(documents, 'project_view.view_project') }}
                </div>
            </div>
        </div>
    </section>
{% endblock %}