{% extends "layouts/page.nunj" %}
{% import "helpers/components.nunj" as comp %}

{% set page = frctl.docs.find('path','') %}

{% set sectionTitle = page.title | default('Your Component Library') %}

{% block primary %}

<div class="Page-header">
    <h2 class="Page-title">{{ page.title | default('Your Component Library') }}</h2>
</div>

<div class="Page-content">

    <div class="Prose">
    {% if page %}
    {{ page | render }}
    {% else %}
    <p>You can browse the component library using the navigation on the left.</p>

    <h3>Component statuses</h3>
    <p>Components and their variants have been given statuses reflecting their state of completion. The available statuses are listed below.</p>
    <table class="StatusTable">
    <tr>
        <th>Label</th>
        <th>Description</th>
    </tr>
    {% for handle, status in frctl.config.components.status.options %}
    <tr>
        <td>{{ comp.status(status, 'labelled') }}</td>
        <td>{{ status.description }}</td>
    </tr>
    {% endfor %}
    </table>
    {% endif %}
    </div>

</div>
{% endblock %}