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

{% set page_title = 'Software categories' %}

{% block body_header %}
<h1 class="title is-size-3 is-size-4-mobile">Software categories</h1>
{% endblock %}

{% block breadcrumbs %}
<!--
<nav class="pt-3" aria-label="breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item">
            <a href="{{ url_for('portal.index') }}">Portal</a>
        </li>
        <li class="breadcrumb-item active" aria-current="page">
            Software
        </li>
    </ol>
</nav>
-->
{% endblock %}

{% block body %}
<div class="columns is-multiline grid">

    {% for c in categories %}
        <div class="column is-one-third">
            <div class="container category-item">
                <a href="{{ url_for('portal.category_view', cat_id=c.get_id(), page=1) }}">
                    <div class="columns is-mobile">
                        <div class="column is-one-third">
                            <img class="align-middle" src="{{ url_for('static', filename='img/categories/%s.svg'|format(c.get_icon())) }}" alt="{{c.get_icon()}}">
                        </div>
                        <div class="column is-two-thirds description">
                                <h1 class="title is-size-5 is-size-6-mobile">{{c.get_name()}}</h1>
                                {% if c.get_summary() %}
                                    <h2 class="subtitle is-size-6 is-size-7-mobile">{{c.get_summary()}}</h2>
                                {% else %}
                                    <h2 class="subtitle is-size-6 is-size-7-mobile">{{c.get_children()|length}} subcategories</h2>
                                {% endif %}

                        </div>
                    </div>
                </a>
            </div>
        </div>
    {% endfor %}

</div>

{% endblock %}