{% extends "layout.html" %}
{% block content %}
<div class="{{ theme.userInputDivClass }}" style="{{ theme.userInputFormColor }}">
    <form method="POST" action="">
        {{ form.hidden_tag() }}
        <fieldset class="form-group">
            <legend class="border-bottom mb-4">{{title}}</legend> 
            {% for item in form %}
            <div class="form-group">
                {% if item.id == "submit" %}
                {% elif item.id == "csrf_token" %}
                {% else %} 
                    {{ item.label(class="form-control-label") }}
                    {% if item.errors %}
                        {{ item(class="form-control form-control-lg is-invalid") }}
                        <div class="invalid-feedback">
                            {% for error in item.errors %}
                                <span>{{ error }}</span>
                            {% endfor %}
                        </div>
                    {% else %}
                        {{ item(class="form-control form-control-lg") }}
                    {% endif %}
                {% endif %}
            </div>
            {% endfor %}
        </fieldset>
        <!-- Submit Button -->
        <div class="form-group">
            {{ form.submit(class="btn btn-outline-info") }}
        </div>
    </form>
</div>

{% if dbTable %}
    <div class="container-fluid pt-2">
        <h3> <a href="#"> {{ tableTitle }}</a> </h3>
        <table class="{{ theme.tableClass }}">
            <thead>
                <tr>
                    <th scope="col">Name</th>
                    <th scope="col">Description</th>
                </tr>
            </thead>
            <tbody>
                {% for item in dbTable %}
                <tr>
                    <th scope="row">{{ item.name }}</th>
                    <td>{{ item.description}}</td>
                </tr>
                {% endfor %}
            </tbody>
        </table> 
    </div>
{% endif %}
{% endblock content %}