<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <link rel='icon' href='/favicon.ico' type='image/x-icon'/>
    <title> <%= settings["WebsiteName"].Value %> || <%= title %></title>

    <!-- Font Awesome Icons -->
    <link rel="stylesheet" href="/plugins/fontawesome-free/css/all.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="/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">

    <!-- Custom CSS Block -->
    <%- block('css').toString() %>

</head>
<body class="hold-transition sidebar-mini">
<!-- Google Tag Manager (noscript) -->
<!-- End Google Tag Manager (noscript) -->
<div class="wrapper">

    <!-- Navbar -->
    <% include ../partials/navbar.ejs %>
    <!-- /.navbar -->

    <!-- Sidebar -->
    <% include ../partials/sidebar.ejs %>
    <!-- /.sidebar -->

    <!-- Content wrapper Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <div class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1 class="m-0 text-dark"><%= title %></h1>
                    </div><!-- /.col -->
                    <div class="col-sm-6">
                        <ol class="breadcrumb float-sm-right">
                            <li class="breadcrumb-item"><a href="#">Home</a></li>
                            <li class="breadcrumb-item active"><%= title %></li>
                        </ol>
                    </div><!-- /.col -->
                </div><!-- /.row -->
            </div><!-- /.container-fluid -->
        </div>
        <!-- /.content-header -->

        <!-- Main content -->
        <div class="content">
            <div class="container-fluid">
            <div class="row">
                <div class="col-md-4">
                    <div class="card card-primary">
                        <div class="card-body">
                            <img style="margin-bottom: 20px;  width: 100%; position: center;" src="/profiles/<%= user.Photo %>" alt="" id="ImagePreview">
                            <form method="post" action="/profile/image" enctype="multipart/form-data">
                                <div class="form-group row">
                                    <label for="picture" class="col-md-12 col-form-label">Profile Picture</label>
                                    <div class="col-ms-12">
                                        <input id="picture" type="file" name="profile_image" oninput="UpdatePreview()"/>
                                    </div>
                                </div>
                                <div class="row">
                                    <!-- /.col -->
                                    <div class="col-12">
                                        <button type="submit" class="btn btn-primary btn-block">Submit</button>
                                    </div>
                                    <!-- /.col -->
                                </div>
                            </form>
                        </div>
                    </div>
                </div>

                <div class="col-md-8">
                    <div class="card card-primary">
                        <div class="card-body">
                            <!-- /.tab-pane -->
                            <form class="form-horizontal" method="POST">
                                <div class="form-group row">
                                    <label for="inputName" class="col-sm-2 col-form-label">Name</label>
                                    <div class="col-sm-10">
                                        <input type="text" name="name" value="<%= user.Name %>" class="form-control" id="inputName"
                                               placeholder="Name">
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label for="inputEmail" class="col-sm-2 col-form-label">Email</label>
                                    <div class="col-sm-10">
                                        <input type="email" name="email" value="<%= user.Email %>" class="form-control" id="inputEmail"
                                               placeholder="Email">
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label for="inputExperience" class="col-sm-2 col-form-label">Phone</label>
                                    <div class="col-sm-10">
                                        <input type="text" name="phone" value="<%= user.Phone %>" class="form-control" id="inputName2"
                                               placeholder="Name">
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label for="inputTeam" class="col-sm-2 col-form-label">Team</label>
                                    <div class="col-sm-10">
                                        <input type="text" name="team" value="<%= user.Position?.Name %>" class="form-control" id="inputName2"
                                               placeholder="Team">
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <div class="offset-sm-2 col-sm-10">
                                        <button type="submit" disabled class="btn btn-primary btn-block">Submit</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>

            </div>




            </div>


                <!-- /.row -->
            </div><!-- /.container-fluid -->
        </div>
        <!-- /.content -->
    </div>

    <!-- /.content-wrapper -->
    <!--    Footer-->
    <% include ../partials/footer.ejs %>

    <!-- Toasts -->
    <% include ../partials/toasts.ejs %>
    <!-- Custom JS Block -->
    <%- block('js').toString() %>
    <!-- AJAXSubmit -->
    <script type="text/javascript" src="/vendor/jquery.ajaxSubmit.min.js"></script>
    <script>
        function UpdatePreview(){
            $('#ImagePreview').attr('src', URL.createObjectURL(event.target.files[0]));
        }

    </script>
</body>
</html>

