<%- include('../partials/head.ejs') %>
    <!--
`body` tag options:

  Apply one or more of the following classes to to the body tag
  to get the desired effect

  * sidebar-collapse
  * sidebar-mini
-->

    <body class="hold-transition sidebar-mini">
        <div class="wrapper">
            <!-- Navbar -->
            <%- include('../partials/navigation.ejs') %>
                <!-- /.navbar -->

                <!-- Main Sidebar Container -->

                <%- include('../partials/sidebar.ejs') %>
                    <div class="pt-20">
                        <% if(errors.length> 0){ %>
                            <div class="alert alert-danger">
                                <% errors.forEach(function(error){ %>
                                    <% if(error !='' ){ %>
                                        <p>
                                            <%= error %>
                                        </p>
                                        <% }}); %>
                            </div>
                            <% } %>
                                <% if(success.length> 0){ %>
                                    <div class="alert alert-success">
                                        <p>
                                            <%=success %>
                                        </p>
                                    </div>
                                    <% } %>
                    </div>
                    <!-- 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">Categories</h1>
                                    </div><!-- /.col -->
                                    <div class="col-sm-6">
                                        <ol class="breadcrumb float-sm-right">
                                            <li class="breadcrumb-item"><a href="/admin">Home</a></li>
                                            <li class="breadcrumb-item"><a href="/admin/categories">Categories</a></li>
                                            <li class="breadcrumb-item active">Edit</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-lg-12">
                                        <form name="edit_category" method="POST">
                                            <div class="card">
                                                <div class="card-header">
                                                    <h3 class="card-title">Edit category</h3>
                                                </div>
                                                <div class="card-body">
                                                    <div class="form-group">
                                                        <label for="category_name">Category Name</label>
                                                        <input type="text" class="form-control" name="name"
                                                            value="<%= data.name %>" id="category_name" />
                                                        <% if(validationError.length> 0){ %>
                                                            <% for(var i=0; i< validationError.length; i++) { let
                                                                obj=validationError[i]; if ("name" in obj) { %>
                                                                <div class="col-sm-12 text-danger p-0">
                                                                    <%= validationError[i].name %>
                                                                </div>
                                                                <% }}} %>
                                                    </div>
                                                    <div class="form-group">
                                                        <label for="edit_category_image">Upload Image</label>
                                                        <div class="input-group">
                                                            <div class="custom-file">
                                                                <input type="hidden" name="base_image" id="baseImage"
                                                                    value="<%= data.image %>" />
                                                                <input type="file" class="custom-file-input"
                                                                    name="imageFile" id="edit_category_image">
                                                                <label class="custom-file-label"
                                                                    for="edit_category_image">
                                                                    Choose file
                                                                </label>
                                                            </div>
                                                            <% if(validationError.length> 0){ %>
                                                                <% for(var i=0; i< validationError.length; i++) { let
                                                                    obj=validationError[i]; if ("base_image" in obj) {
                                                                    %>
                                                                    <div class="col-sm-12 text-danger p-0">
                                                                        <%= validationError[i].base_image %>
                                                                    </div>
                                                                    <% }}} %>
                                                        </div>

                                                    </div>

                                                    <div class="form-group col-2 border p-3" id="previewImageDiv">
                                                        <img id="previewImage" src="/images/<%= data.image %>" />
                                                    </div>
                                                    <div class="custom-control custom-checkbox">
                                                        <input class="custom-control-input" name="merchant" value="1"
                                                            type="checkbox" id="customCheckbox2" <%=(data.merchant==1)
                                                            ? "checked" : '' %>>
                                                        <label for="customCheckbox2" class="custom-control-label">
                                                            Merch.
                                                        </label>
                                                    </div>
                                                </div>
                                                <div class="card-footer">
                                                    <button type="submit" class="btn btn-primary">Submit</button>
                                                    <a href="/admin/categories" class="ml-2 btn btn-warning">Cancel</a>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                    <!-- /.col-md-6 -->
                                </div>
                                <!-- /.row -->
                            </div>
                            <!-- /.container-fluid -->
                        </div>
                        <!-- /.content -->
                    </div>
                    <!-- /.content-wrapper -->

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

                    <!-- Main Footer -->

        </div>
        <!-- ./wrapper -->

        <!-- REQUIRED SCRIPTS -->

        <!-- jQuery -->

        <%- include('../partials/scripts.ejs') %>

    </body>