{% extends 'base.html.twig' %}

{% block body %}
    {% include 'layout/header.html.twig' %}
    
    <div class="container mt-4">
        <div class="row mb-3">
            <div class="col-md-6">
                <label for="typeFilter" class="form-label">Filter by Product Type:</label>
                <select id="typeFilter" class="form-select">
                    <option value="">All Types</option>
                    {% for typeValue in typeValues %}
                        <option value="{{ typeValue }}">{{ typeValue }}</option>
                    {% endfor %}
                </select>
            </div>
        </div>
        <table id="myDataTable" class="table table-striped">
            <thead>
                <tr>
                    <th>Project Name</th>
                    <th>Type</th>
                    <th>SDGs</th>
                    <th>Vintage</th>
                    <th>Location</th>
                    <th>Registry</th>
                    <th>Quantity</th>
                    <th>Price</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tfoot>
                <tr>
                    <th>Project Name</th>
                    <th>Type</th>
                    <th>SDGs</th>
                    <th>Vintage</th>
                    <th>Location</th>
                    <th>Registry</th>
                    <th>Quantity</th>
                    <th>Price</th>
                    <th>Action</th>
                </tr>
            </tfoot>
        </table>
    </div>
{% endblock %}