{{define "title"}}Statping Messages{{end}}
{{define "content"}}
<div class="container col-md-7 col-sm-12 mt-md-5 bg-light">
{{template "nav"}}
{{if .}}
    <div class="col-12">
        <h3>Messages</h3>
        <table class="table table-striped">
            <thead>
            <tr>
                <th scope="col">Title</th>
                <th scope="col">Service</th>
                <th scope="col">Begins</th>
                <th scope="col"></th>
            </tr>
            </thead>
            <tbody>
            {{range .}}
                <tr id="message_{{.Id}}">
                    <td>{{.Title}}</td>
                    <td>{{if .Service}}<a href="/service/{{.Service.Id}}">{{.Service.Name}}</a>{{end}}</td>
                    <td>{{.StartOn}}</td>
                    <td class="text-right">
                        <div class="btn-group">
                            <a href="/message/{{.Id}}" class="btn btn-outline-secondary"><i class="fas fa-exclamation-triangle"></i> Edit</a>
                            <a href="/api/messages/{{.Id}}" class="ajax_delete btn btn-danger" data-method="DELETE" data-obj="message_{{.Id}}" data-id="{{.Id}}"><i class="fas fa-times"></i></a>
                        </div>
                    </td>
                </tr>
            {{end}}
            </tbody>
        </table>
    </div>
{{end}}
    <div class="col-12">
        <h3>Create Message</h3>
        {{template "form_message" NewMessage}}
    </div>
</div>
{{end}}
{{define "extra_css"}}
<link rel="stylesheet" href="/css/flatpickr.min.css">
{{end}}
{{define "extra_scripts"}}
<script src="/js/flatpickr.js"></script>
<script src="/js/rangePlugin.js"></script>
<script>
$(document).ready(function() {
    $("#start_on").flatpickr({
        enableTime: true,
        dateFormat: "Z",
        minDate: "today",
        "plugins": [new rangePlugin({ input: "#end_on"})]
    });
});
</script>
{{end}}