{% extends '_layouts/main' %}

{% block main %}
<ul class="breadcrumbs">
    <li><a href="../">Home</a></li>
    <li><a href="/drink">Drinks</a></li>
    <li>Styles</li>
</ul>
<div class="full-bleed-header" style="background-size: 100%; height: 200px; background-image: linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)), url(/images/wood-table.jpg); background-repeat: no-repeat, repeat;">
    <div class="page-title text-center">
        <h2 class="logo"><span class="scripty">Coffee Styles</h2>
    </div>
</div>
<div class="row page-content">
    <div class="large-12 small-12 columns">
        <p>The styles.</p>
        <table width="100%">
            <tr>
                <th>Style</th>
                <th>Description</th>
            </tr>
            {% for style in craft.categories.group('drinkStyles') %}
            <tr>
                <td><a href="{{ style.url }}">{{ style.title }}</a></td>
                <td>{{ style.styleDescription }}</td>
            </tr>
            {% endfor %}
        </table>
    </div>
</div>
{% endblock %}