{% extends "layout.html" %}
{% block content %}
<div class="{{ theme.userInputDivClass }}" style="{{ theme.userInputFormColor }}">
    <form method="POST" action="">
        {{ form.hidden_tag() }}
        <fieldset class="form-group"></fieldset>
        <legend class="border-bottom mb-4">Register Status</legend> 

        <!-- name of the company-->
        <div class="form-group">
            {{ form.name.label(class="form-control-label") }}
            {% if form.name.errors %}
                {{ form.name(class="form-control form-control-lg is-invalid") }}
                <div class="invalid-feedback">
                    {% for error in form.name.errors %}
                        <span>{{ error }}</span>
                    {% endfor %}
                </div>
            {% else %}
                {{ form.name(class="form-control form-control-lg") }}
            {% endif %}
        </div>
        
        <!-- description of the company-->
        <div class="form-group">
            {{ form.description.label(class="form-control-label") }}
            {% if form.description.errors %}
                {{ form.description(class="form-control form-control-lg is-invalid") }}
                <div class="invalid-feedback">
                    {% for error in form.description.errors %}
                        <span>{{ error }}</span>
                    {% endfor %}
                </div>
            {% else %}
                {{ form.description(class="form-control form-control-lg") }}
            {% endif %}
        </div>
        
        <!-- Submit Button -->
        <div class="form-group">
            {{ form.submit(class="btn btn-outline-info") }}
        </div>

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