{{define "title"}}Statup 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>{{Duration 0}}</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 confirm-btn" 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: "Y-m-d H:i",
            minDate: "today",
            "plugins": [new rangePlugin({ input: "#end_on"})]
        });
    });
</script>
{{end}}