{% set title = _("Services") %}

{% extends "layout/dash.html" %}

{% block content %}

<style id="grid">
.container.module:nth-child(1n) {
	grid-area: 1 / 1 / 5 / 5;
}
</style>

<div class="container module">

<button type="button" class="btn btn-primary" style="margin:10px;" data-toggle="modal" data-target="#myModal">{{ _("Add") }}</button>
<div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">{{ _("Add service") }}</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">
{% macro render_field(field) %}
    <div class="form-group">
        <label for="{{ field.label.field_id }}">{{ _(field.label.text) }}</label>
        {{ field(**kwargs)|safe }}
    {% if field.errors %}
        <ul class=errors>
        {% for error in field.errors %}
            <li>{{ error }}</li>
        {% endfor %}
        </ul>
    {% endif %}
    </div>
{% endmacro %}
                <form method=post>
                    <dl>
                        {{ render_field(form.name) }}
                        {{ render_field(form.type) }}
                        {{ render_field(form.contact) }}
                        {{ render_field(form.phone) }}
                        {{ render_field(form.website) }}
                    </dl>
                    <input type=submit value="{{ _('Add') }}">
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">{{ _("Close") }}</button>
            </div>
        </div>
    </div>
</div>

<table class="table">
    <thead class="thead-light">
        <tr>
            <th scope="col">{{ _("Name") }}</th>
            <th scope="col">{{ _("Type") }}</th>
            <th scope="col">{{ _("Contact") }}</th>
            <th scope="col">{{ _("Phone") }}</th>
            <th scope="col">{{ _("Website") }}</th>
        </tr>
    </thead>
    <tbody>
{% for row in data %}
        <!--<tr class="table-{{ 'success' if row[5] else 'danger' }}">-->
        <tr>
            <th>{{ row[0] }}</th>
            <td>{{ row[1] }}</td>
            <td>{{ row[2] }}</td>
            <td>{{ row[3] }}</td>
            <td>{{ row[4] }}</td>
        </tr>
{% endfor %}
    </tbody>
</table>

</div>

{% endblock %}