{% extends "fmd_base.html" %}
{% block content %}
    <div class="card mb-3">
        <div class="card-header"><h4>Rules</h4></div>
        <div class="card-body">
            <div class="table-responsive">
                <form id="myForm">
                    <table class="table table-striped table-bordered" id="dataTable" width="100%" cellspacing="0"
                           data-page-length="10">
                        <thead>
                        <tr>
                            <th>Color</th>
                            <th>Rule</th>
                            <th>HTTP Method</th>
                            <th>Endpoint</th>
                            <th>Last requested</th>
                            <th>Monitoring-level<sup>*</sup></th>
                        </tr>
                        </thead>
                        <tbody>
                        {% for row in rules %}
                            <tr>
                                <td style="background-color: {{ row.color }}"></td>
                                <td style="max-width: 200px;">{{ row.rule }}</td>
                                <td>{{ ", ".join(row.methods) }}</td>
                                <td style="max-width: 200px;">{{ row.endpoint }}</td>
                                <td style="text-align: center;">{{ "{:%Y-%m-%d %H:%M:%S }".format(row.last_accessed) if row.last_accessed }}</td>
                                <td>
                                    <span hidden>{{ row.form.monitor.data }}</span>
                                    {{ row.form.monitor(onchange='sendForm("{}", this.value);'.format(row.endpoint)) }}
                                </td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </form>
            </div>
        </div>
    </div>

    <div class="card mb-3">
        <div class="card-header"><h5><sup>*</sup>Monitoring-level</h5></div>
        <div class="card-body">{{ information|safe }}</div>
    </div>

{% endblock %}

{% block script %}
    <script>
        function sendForm(endpoint, value) {
            $.ajax({
                url: '#',
                data: {
                    'name': endpoint,
                    'value': value
                },
                type: 'post',
                dataType: 'json'
            });
        }
    </script>
{% endblock %}