{% layout 'layouts/html.liquid' %}

{% block head %}
<title>pricing</title>
{% endblock %}

{% block content %}
<div class="row">
    <div class="col">
        <div class="d-flex justify-content-between mb-4">
            <h1>Pricing Portal</h1>
            <a href="/payment" class="btn d-flex align-items-center payment-btn">+ Make a Payment</a>
            <style>
                .payment-btn { background-color: #ffc432; color: black; border: 3px solid gold; }
            </style>
        </div>
    </div>
</div>
<hr>
<h2 class="mb-4">Schedules</h2>
<p>Pricing and payment portal for our products and services. Services are given as an hourly rate, and merchandise is priced per unit.</p>
{% for category in categories %}
    <div class="category-section mb-4">
        <h3>{{ category }}</h3>
        <table class="table table-responsive">
            <thead>
            <tr>
                <th>Service</th>
                <th>Description</th>
                <th>Pricing</th>
            </tr>
            </thead>
            {% for item in pricings[category].items %}
                <tr>
                    <td>{{ item.title }}</td>
                    <td>{{ item.description | if: item.description }}</td>
                    <td>{{ item.pricing }}</td>
                </tr>
            {% endfor %}
        </table>
    </div>
{% endfor %}
{% endblock %}