{{define "base.html"}}
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>{{template "title" .}}</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Font Awesome -->
    <link rel="stylesheet" href="static/plugins/fontawesome-free/css/all.min.css">
    <!-- iCheck for checkboxes and radio inputs -->
    <link rel="stylesheet" href="static/plugins/icheck-bootstrap/icheck-bootstrap.min.css">
    <!-- Select2 -->
    <link rel="stylesheet" href="static/plugins/select2/css/select2.min.css">
    <!-- Toastr -->
    <link rel="stylesheet" href="static/plugins/toastr/toastr.min.css">
    <!-- Ionicons -->
    <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
    <!-- overlayScrollbars -->
    <link rel="stylesheet" href="static/dist/css/adminlte.min.css">
    <!-- Google Font: Source Sans Pro -->
    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
</head>

<body class="hold-transition sidebar-mini">
    <!-- Site wrapper -->
    <div class="wrapper">
        <!-- Navbar -->
        <nav class="main-header navbar navbar-expand navbar-white navbar-light">
            <!-- Left navbar links -->
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a>
                </li>
            </ul>

            <!-- SEARCH FORM -->
            <form class="form-inline ml-3">
                <div class="input-group input-group-sm">
                    <input class="form-control form-control-navbar" type="search" placeholder="Search"
                        aria-label="Search">
                    <div class="input-group-append">
                        <button class="btn btn-navbar" type="submit">
                            <i class="fas fa-search"></i>
                        </button>
                    </div>
                </div>
            </form>

        <!-- Right navbar links -->
        <div class="navbar-nav ml-auto">
            <button type="button" class="btn btn-outline-primary btn-sm" data-toggle="modal"
                data-target="#modal_new_client"><i class="nav-icon fas fa-plus"></i> New
                Client</button>
        </nav>
        </nav>
        <!-- /.navbar -->

        <!-- Main Sidebar Container -->
        <aside class="main-sidebar sidebar-dark-primary elevation-4">
            <!-- Brand Logo -->
            <a href="/" class="brand-link">
                <!-- <img src="static/dist/img/logo.png" alt="Wireguard UI"
                    class="brand-image img-circle elevation-3" style="opacity: .8"> -->
                <span class="brand-text font-weight-light">WIREGUARD UI</span>
            </a>

            <!-- Sidebar -->
            <div class="sidebar">
                <!-- Sidebar user (optional) -->
                <div class="user-panel mt-3 pb-3 mb-3 d-flex">
                    <div class="image">
                        <img src="static/dist/img/user2-160x160.jpg" class="img-circle elevation-2">
                    </div>
                    <div class="info">
                        <a href="#" class="d-block">{{template "username" .}}</a>
                    </div>
                </div>

                <!-- Sidebar Menu -->
                <nav class="mt-2">
                    <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
                        <li class="nav-item">
                            <a href="#" class="nav-link active">
                                <i class="nav-icon fas fa-th"></i>
                                <p>
                                    Dashboard
                                </p>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a href="#" class="nav-link">
                                <i class="nav-icon fas fa-server"></i>
                                <p>
                                    Server Config
                                </p>
                            </a>
                        </li>
                    </ul>
                </nav>
                <!-- /.sidebar-menu -->
            </div>
            <!-- /.sidebar -->
        </aside>

        <div class="modal fade" id="modal_new_client">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">New Wireguard Client</h4>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <form name="frm_new_client" id="frm_new_client">
                        <div class="modal-body">
                            <div class="form-group">
                                <label for="client_name" class="control-label">Name</label>
                                <input type="text" class="form-control" id="client_name" name="client_name">
                            </div>
                            <div class="form-group">
                                <label for="client_email" class="control-label">Email</label>
                                <input type="text" class="form-control" id="client_email" name="client_email">
                            </div>
                            <div class="form-group">
                                <label for="client_allocated_ips" class="control-label">IP Allocation</label>
                                <select id="client_allocated_ips" class=" select2" data-placeholder="Select an IP address"
                                    style="width: 100%;">
                                    <option>192.168.1.1</option>
                                    <option>192.168.1.2</option>
                                    <option>192.168.1.3</option>
                                    <option>192.168.1.4</option>
                                    <option>192.168.1.5</option>
                                    <option>192.168.1.6</option>
                                    <option>192.168.1.7</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="client_allowed_ips" class="control-label">Allowed IPs</label>
                                <input type="text" class="form-control" id="client_allowed_ips" value="0.0.0.0/0">
                            </div>
                            <div class="form-group">
                                <div class="icheck-primary d-inline">
                                    <input type="checkbox" id="enabled" checked>
                                    <label for="enabled">
                                        Enable after creation
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer justify-content-between">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                            <button type="submit" class="btn btn-primary">Submit</button>
                        </div>
                    </form>
                </div>
                <!-- /.modal-content -->
            </div>
            <!-- /.modal-dialog -->
        </div>
        <!-- /.modal -->

        <!-- Content Wrapper. Contains page content -->
        <div class="content-wrapper">
            <!-- Content Header (Page header) -->
            <section class="content-header">
                <div class="container-fluid">
                    <div class="row mb-2">
                        <div class="col-sm-6">
                            <h1>{{template "page_title" .}}</h1>
                        </div>
                    </div>
                </div><!-- /.container-fluid -->
            </section>

            <!-- Main content -->
            {{template "page_content" .}}
            <!-- /.content -->
        </div>
        <!-- /.content-wrapper -->

        <footer class="main-footer">
            <div class="float-right d-none d-sm-block">
                <b>Version</b> 0.1
            </div>
            <strong>Copyright &copy; 2020 <a href="https://github.com/ngoduykhanh/wireguard-ui">Wireguard UI</a>.</strong> All rights
            reserved.
        </footer>

        <!-- Control Sidebar -->
        <aside class="control-sidebar control-sidebar-dark">
            <!-- Control sidebar content goes here -->
        </aside>
        <!-- /.control-sidebar -->
    </div>
    <!-- ./wrapper -->

    <!-- jQuery -->
    <script src="static/plugins/jquery/jquery.min.js"></script>
    <!-- Bootstrap 4 -->
    <script src="static/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
    <!-- Select2 -->
    <script src="static/plugins/select2/js/select2.full.min.js"></script>
    <!-- jquery-validation -->
    <script src="static/plugins/jquery-validation/jquery.validate.min.js"></script>
    <!-- Toastr -->
    <script src="static/plugins/toastr/toastr.min.js"></script>
    <!-- AdminLTE App -->
    <script src="static/dist/js/adminlte.min.js"></script>
    <!-- AdminLTE for demo purposes -->
    <script src="static/dist/js/demo.js"></script>
    <script>
        // submitNewClient function for new client form submition
        function submitNewClient() {
            // TODO: Get allocated_ips and allowed_ips as multiple value in array
            var name = $("#client_name").val();
            var email = $("#client_email").val();
            var allocated_ips = $("#client_allocated_ips").select2('val');
            var allowed_ips = $("#client_allowed_ips").val();
            var enabled = false;

            if ($("#enabled").is(':checked')){
                enabled = true;
            }

            var data = {"name": name, "email": email, "allocated_ips": [allocated_ips], "allowed_ips": [allowed_ips],
            "enabled": enabled};
            console.log(data);

            $.ajax({
                cache: false,
                method: 'POST',
                url: '/new-client',
                dataType: 'json',
                contentType: "application/json",
                data: JSON.stringify(data),
                success: function(data) {
                    $('#modal_new_client').modal('hide');
                    toastr.success('Created new client successfully');
                    // TODO: trigger reloading the dashboard
                }
            });
        }
    </script>
    <script>
        //Initialize Select2 Elements
        $('.select2').select2()

        // New client form validation
        $(document).ready(function () {
            $.validator.setDefaults({
                submitHandler: function () {
                    submitNewClient();
                }
            });
            $('#frm_new_client').validate({
                rules: {
                    client_name: {
                        required: true,
                    },
                    client_email: {
                        required: true,
                        email: true,
                    },
                },
                messages: {
                    client_name: {
                        required: "Please enter a email address"
                    },
                    client_email: {
                        required: "Please enter a email address",
                        email: "Please enter a vaild email address"
                    },
                },
                errorElement: 'span',
                errorPlacement: function (error, element) {
                    error.addClass('invalid-feedback');
                    element.closest('.form-group').append(error);
                },
                highlight: function (element, errorClass, validClass) {
                    $(element).addClass('is-invalid');
                },
                unhighlight: function (element, errorClass, validClass) {
                    $(element).removeClass('is-invalid');
                }
            });
        });
    </script>

    <!-- START: On page script -->
    {{template "bottom_js" .}}
    <!-- END: On page script -->
</body>

</html>
{{end}}