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

{% set page_title = 'Sections in ' + repo_suite.suite.name %}

{% 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 active" aria-current="page">
            {{repo_suite.suite.name}}
        </li>
    </ol>
</nav>
{% endblock %}

{% block body %}

<div class="columns">
    <div class="column">
        <h1 class="h2">Sections in {{repo_suite.suite.name}}</h1>
    </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>
<div class="columns is-multiline grid">

    {% for section in sections %}
    <div class="column is-one-third">
        <a href="{{ url_for('portal.section_view',
                            repo_name=repo_suite.repo.name,
                            suite_name=repo_suite.suite.name,
                            section_name=section.name,
                            page=1) }}" class="card-link">
        <div class="container category-item">
            <strong>{{section.title}}</strong><br/>
            <span>{{section.summary}}</span>
        </div>
        </a>
    </div>
    {% endfor %}

</div>

{% endblock %}