{% extends 'layouts/base.html' %}

{% set page_title = 'Section %s in %s:%s (%s)'|format(section.title, repo_suite.repo.name, repo_suite.suite.name, current_page) %}

{% block body_header %}

{% endblock %}

{% block breadcrumbs %}
<nav class="pt-3" aria-label="breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item">
            <a href="{{ url_for('portal.repo_index') }}">Packages</a>
        </li>
        <li class="breadcrumb-item">
            <a href="{{ url_for('portal.repo_index', repo_name=repo_suite.repo.name) }}">{{repo_suite.repo.name}}</a>
        </li>
        <li class="breadcrumb-item">
            <a href="{{ url_for('portal.sections_index', repo_name=repo_suite.repo.name, suite_name=repo_suite.suite.name) }}">{{repo_suite.suite.name}}</a>
        </li>
        <li class="breadcrumb-item active" aria-current="page">
            {{section.title}}
        </li>
    </ol>
</nav>
{% endblock %}

{% block body %}

<div class="columns">
    <div class="column">
        <h2>Contents of section "{{section.title}}" in suite "{{repo_suite.suite.name}}"</h2>
    </div>
    <div class="column is-one-quarter-desktop search">
        <form class="form-inline" action="/search_pkg" method="GET">
            <p class="control has-icons-left">
                <input id="term" name="term" class="input is-rounded" type="text" placeholder="Find a package...">
                <span class="icon is-left">
                    <i class="fas fa-search"></i>
                </span>

            </p>
        </form>
    </div>
</div>

{% if current_page == 1 and not packages%}
<div class="alert alert-dark" role="alert">
  No packages were found in this section!
</div>
{% endif %}

<div class="package-items">
    {% for p in packages %}
    <div>
        <a class="border-box" href="{{ url_for('packages.bin_package_details',
                                               repo_name=repo_suite.repo.name,
                                               suite_name=repo_suite.suite.name,
                                               name=p.name) }}">

            <div class="columns is-mobile">
                <div class="column">
                    <strong>{{p.name}}</strong>
                    <p>{{p.summary}}</p>
                </div>
                <div class="column is-narrow">
                    {% if p.component.is_primary() %}
                        {% set component_badge_style = 'badge-primary' %}
                    {% elif p.component.is_nonfree() %}
                        {% set component_badge_style = 'badge-danger' %}
                    {% else %}
                        {% set component_badge_style = 'badge-secondary' %}
                    {% endif %}

                    <small><span class="badge {{component_badge_style}} badge-pill">{{p.component.name}}</span></small>
                </div>
            </div>
        </a>
    </div>
    {% endfor %}

</div>

<br/>

{% if page_count > 1 %}
<nav class="pagination is-centered" role="navigation" aria-label="pagination">
    <a class="pagination-previous" href="{{ url_for('portal.section_view',
                                                     repo_name=repo_suite.repo.name,
                                                     suite_name=repo_suite.suite.name,
                                                     section_name=section.name,
                                                     page=current_page-1) if current_page > 1 else '#'}}">Previous</a>
    <a class="pagination-next" href="{{ url_for('portal.section_view',
                                                repo_name=repo_suite.repo.name,
                                                suite_name=repo_suite.suite.name,
                                                section_name=section.name,
                                                page=current_page+1) if current_page < page_count else '#'}}">Next page</a>

    <ul class="pagination-list">
        <li>
            <a class="pagination-link {{'is-current' if 1 == current_page }}" href="{{ url_for('portal.section_view',
                                                                                               repo_name=repo_suite.repo.name,
                                                                                               suite_name=repo_suite.suite.name,
                                                                                               section_name=section.name, page=1) }}">1</a>
        </li>

        {% if page_count > 7 and current_page > 3 %}
        <li><span class="pagination-ellipsis">&hellip;</span></li>
        {% endif %}

        {% for i in range(2, page_count) %}
            {% if page_count < 8 or i < current_page + 2 and i > current_page - 2 or current_page < 4 and i < 6 or current_page > page_count - 3 and i > page_count - 5 %}

            <li>
                <a class="pagination-link {{'is-current' if i == current_page }}" href="{{ url_for('portal.section_view',
                                                                                                    repo_name=repo_suite.repo.name,
                                                                                                    suite_name=repo_suite.suite.name,
                                                                                                    section_name=section.name, page=i) }}">{{i}}</a>
            </li>

            {% endif %}
        {% endfor %}

        {% if page_count > 7 and current_page < page_count - 2 %}
        <li><span class="pagination-ellipsis">&hellip;</span></li>
        {% endif %}


        <li>
            <a class="pagination-link {{'is-current' if page_count == current_page }}" href="{{ url_for('portal.section_view',
                                                                                                         repo_name=repo_suite.repo.name,
                                                                                                         suite_name=repo_suite.suite.name,
                                                                                                         section_name=section.name,
                                                                                                         page=page_count) }}">{{page_count}}</a>
        </li>
    </ul>
</nav>
{% endif %}

{% endblock %}