{% extends "skeleton.html" %}

{% block base_content %}
<div class="row larger">
    <h2>Available webfont icons</h2>
    
    {% if webfont_store.errors %}
    <div data-alert class="alert-box alert round text-center">
        {% for font_name,msg in webfont_store.errors.items %}
        <p>{{ msg|safe }}</p>
        {% endfor %}
    </div>
    {% endif %}
    
    {% if webfont_store == None %}
    <div data-alert class="alert-box alert round text-center">
        <p><code>settings.ICOMOON_MANIFEST_FILEPATH</code> is not configured, unable to find a Manifest file.</p>
    </div>
    {% else %}
        {% for font_name,font_icons in webfont_store.get_manifests.items %}
        <h3>{{ font_name }} ({{ font_icons|length }})</h3>
        <ul class="small-block-grid-2 medium-block-grid-3 large-block-grid-4 icomoon-icons">
            {% for icon_key,icon_datas in font_icons.items %}
            <li>
                <p class="text-center visual"><i class="{{ icon_datas.class_name }} icon-3x"></i></p>
                <table class="expand">
                    <tr>
                        <th class="text-right">CSS</th>
                        <td>{{ icon_datas.class_name }}</td>
                    </tr>
                    <tr>
                        <th class="text-right">Unicode</th>
                        <td>{{ icon_datas.unicode }}</td>
                    </tr>
                    <tr>
                        <th class="text-right">UTF-8</th>
                        <td>{{ icon_datas.utf8 }}</td>
                    </tr>
                    <tr>
                        <th class="text-right">Integer</th>
                        <td>{{ icon_datas.int }}</td>
                    </tr>
                </table>
            </li>
            {% endfor %}
        </ul>
        {% if not forloop.last %}<hr>{% endif %}
        {% endfor %}
    {% endif %}
    
</div>
{% endblock %}