{{define "title"}}
Home
{{end}}

{{define "username"}}
{{index . "name"}}
{{end}}

{{define "page_title"}}
Dashboard
{{end}}

{{define "page_content"}}
<section class="content">
    <div class="container-fluid">
        <h5 class="mt-4 mb-2">Wireguard Clients</h5>
        <div class="row">
            {{range .clientDataList}}
            <div class="col-sm-6">
                <div class="info-box">
                    <img
                        src="{{ .QRCode }}" />
                    <div class="info-box-content">
                        <div class="btn-group">
                            <button type="button" class="btn btn-outline-success btn-sm">Download</button>
                            <button type="button" class="btn btn-outline-primary btn-sm">Edit</button>
                            <button type="button" class="btn btn-outline-warning btn-sm">Disable</button>
                            <button type="button" class="btn btn-outline-danger btn-sm" data-toggle="modal" data-target="#modal_remove_client" data-clientid="{{ .Client.ID }}" data-clientname="{{ .Client.Name }}">Remove</button>
                        </div>
                        <hr>
                        <span class="info-box-text"><i class="fas fa-user"></i> {{ .Client.Name }}</span>
                        <span class="info-box-text"><i class="fas fa-envelope"></i> {{ .Client.Email }}</span>
                        <span class="info-box-text"><i class="fas fa-clock"></i>
                            {{ .Client.CreatedAt.Format "2 Jan 2006 15:04" }}</span>
                        <span class="info-box-text"><i class="fas fa-history"></i>
                            {{ .Client.UpdatedAt.Format "2 Jan 2006 15:04" }}</span>
                        <span class="info-box-text"><strong>IP Allocation</strong></span>
                        {{range .Client.AllocatedIPs}}
                        <small class="badge badge-secondary"></i>{{.}}</small>
                        {{end}}
                        <span class="info-box-text"><strong>Allowed IPs</strong></span>
                        {{range .Client.AllowedIPs}}
                        <small class="badge badge-secondary"></i>{{.}}</small>
                        {{end}}
                    </div>
                    <!-- /.info-box-content -->
                </div>
                <!-- /.info-box -->
            </div>
            <!-- /.col -->
            {{end}}
        </div>
        <!-- /.row -->
    </div>
</section>

<div class="modal fade" id="modal_remove_client">
    <div class="modal-dialog">
        <div class="modal-content bg-danger">
            <div class="modal-header">
                <h4 class="modal-title">Remove</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
            </div>
            <div class="modal-footer justify-content-between">
                <button type="button" class="btn btn-outline-light" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-outline-light" id="remove_client_confirm" value="xxx">Apply</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->
{{end}}

{{define "bottom_js"}}
    <script>
        // modal_remove_client modal event
        $('#modal_remove_client').on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget);
            var client_id = button.data('clientid');
            var client_name = button.data('clientname');
            var modal = $(this);
            modal.find('.modal-body').text("You are about to remove client " + client_name);
            modal.find('#remove_client_confirm').val(client_id);
        })

        // remove_client_confirm button event
        $(document).ready(function () {
            $('#remove_client_confirm').click(function () {
                var client_id = $(this).val();
                var data = {"id": client_id};
                $.ajax({
                    cache: false,
                    method: 'POST',
                    url: '/remove-client',
                    dataType: 'json',
                    contentType: "application/json",
                    data: JSON.stringify(data),
                    success: function(data) {
                        $('#modal_remove_client').modal('hide');
                        toastr.success('Removed client successfully');
                        // TODO: trigger reloading the dashboard
                    }
                });
            });
        });
    </script>
{{end}}