<?php include('partials/header.php'); ?>


<div class="tree">
    DURVO
</div>

<script>
    $(document).ready(function () {
//        $('body > .main').addClass('show-sidebar-tree');
    });
</script>

<main>
    <div class="card style-1 mb-3">
        <div class="card-header">
            <h5><i class="mdi mdi-folder text-primary mr-3"></i> <strong>Categories</strong></h5>
            <div>
                <div class="input-group mb-0 prepend-transparent">
                    <div class="input-group-prepend">
                        <span class="input-group-text px-1"><i class="mdi mdi-magnify"></i></span>
                    </div>
                    <input type="text" class="form-control form-control-sm" aria-label="Search" placeholder="Search">
                </div>
            </div>
        </div>
        <div class="card-body pt-3">
            <div class="toolbar row mb-3">
                <div class="col-12 d-flex align-items-center">
                    <h5>List of your categories</h5>
                </div>
            </div>

            <div class="muted-cards-2">
                <div style="padding-left: 0px;">
                    <div class="card mb-2 not-collapsed-border collapsed moveable">
                        <div class="card-body py-2 px-3">
                            <div class="row align-items-center">
                                <div class="col-12 col-sm col-md-8 col-lg col-xl-9 my-1">
                                    <h6 class="text-dark text-break-line-2 mb-0"><i class="mdi mdi-folder text-muted mdi-18px mr-2"></i> Modern Golden Watch &nbsp;/&nbsp; <a href="#" class="text-primary">Blog</a></h6>
                                </div>

                                <div class="col-12 col-sm col-md-4 col-lg col-xl-3 my-1 text-end text-right">
                                    <a href="#" class="btn btn-outline-primary btn-sm btn-sm-only-icon"><i class="mdi mdi-pencil"></i> <span class="d-none d-md-block">Edit</span></a> 
                                    <!--<a href="#" class="btn btn-outline-danger btn-sm btn-sm-only-icon"><i class="mdi mdi-delete"></i> <span class="d-none d-md-block">Delete</span></a>-->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div style="padding-left: 0px;">
                    <div class="card mb-2 not-collapsed-border collapsed moveable">
                        <div class="card-body py-2 px-3">
                            <div class="row align-items-center">
                                <div class="col-12 col-sm col-md-8 col-lg col-xl-9 my-1">
                                    <h6 class="text-dark text-break-line-2 mb-0"><i class="mdi mdi-folder text-muted mdi-18px mr-2"></i> Modern Golden Watch &nbsp;/&nbsp; <a href="#" class="text-primary">Blog</a></h6>
                                </div>

                                <div class="col-12 col-sm col-md-4 col-lg col-xl-3 my-1 text-end text-right">
                                    <a href="#" class="btn btn-outline-primary btn-sm btn-sm-only-icon"><i class="mdi mdi-pencil"></i> <span class="d-none d-md-block">Edit</span></a> 
                                    <!--<a href="#" class="btn btn-outline-danger btn-sm btn-sm-only-icon"><i class="mdi mdi-delete"></i> <span class="d-none d-md-block">Delete</span></a>-->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div style="padding-left: 0px;">
                    <div class="card mb-2 not-collapsed-border collapsed moveable">
                        <div class="card-body py-2 px-3">
                            <div class="row align-items-center">
                                <div class="col-12 col-sm col-md-8 col-lg col-xl-9 my-1">
                                    <h6 class="text-dark text-break-line-2 mb-0"><i class="mdi mdi-folder text-muted mdi-18px mr-2"></i> Modern Golden Watch &nbsp;/&nbsp; <a href="#" class="text-primary">Blog</a></h6>
                                </div>

                                <div class="col-12 col-sm col-md-4 col-lg col-xl-3 my-1 text-end text-right">
                                    <a href="#" class="btn btn-outline-primary btn-sm btn-sm-only-icon"><i class="mdi mdi-pencil"></i> <span class="d-none d-md-block">Edit</span></a> 
                                    <!--<a href="#" class="btn btn-outline-danger btn-sm btn-sm-only-icon"><i class="mdi mdi-delete"></i> <span class="d-none d-md-block">Delete</span></a>-->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div style="padding-left: 20px;">
                    <div class="card mb-2 not-collapsed-border collapsed moveable">
                        <div class="card-body py-2 px-3">
                            <div class="row align-items-center">
                                <div class="col-12 col-sm col-md-8 col-lg col-xl-9 my-1">
                                    <h6 class="text-dark text-break-line-2 mb-0"><i class="mdi mdi-folder text-muted mdi-18px mr-2"></i> Modern Golden Watch &nbsp;/&nbsp; <a href="#" class="text-primary">Blog</a></h6>
                                </div>

                                <div class="col-12 col-sm col-md-4 col-lg col-xl-3 my-1 text-end text-right">
                                    <a href="#" class="btn btn-outline-primary btn-sm btn-sm-only-icon"><i class="mdi mdi-pencil"></i> <span class="d-none d-md-block">Edit</span></a> 
                                    <!--<a href="#" class="btn btn-outline-danger btn-sm btn-sm-only-icon"><i class="mdi mdi-delete"></i> <span class="d-none d-md-block">Delete</span></a>-->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div style="padding-left: 40px;">
                    <div class="card mb-2 not-collapsed-border collapsed moveable">
                        <div class="card-body py-2 px-3">
                            <div class="row align-items-center">
                                <div class="col-12 col-sm col-md-8 col-lg col-xl-9 my-1">
                                    <h6 class="text-dark text-break-line-2 mb-0"><i class="mdi mdi-folder text-muted mdi-18px mr-2"></i> Modern Golden Watch &nbsp;/&nbsp; <a href="#" class="text-primary">Blog</a></h6>
                                </div>

                                <div class="col-12 col-sm col-md-4 col-lg col-xl-3 my-1 text-end text-right">
                                    <a href="#" class="btn btn-outline-primary btn-sm btn-sm-only-icon"><i class="mdi mdi-pencil"></i> <span class="d-none d-md-block">Edit</span></a> 
                                    <!--<a href="#" class="btn btn-outline-danger btn-sm btn-sm-only-icon"><i class="mdi mdi-delete"></i> <span class="d-none d-md-block">Delete</span></a>-->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>

    <div class="card style-1 mb-3">
        <div class="card-header">
            <h5><i class="mdi mdi-folder text-primary mr-3"></i> <strong>Add a category</strong></h5>
            <div>
                <button type="button" class="btn btn-success btn-sm">Save</button>
                <button type="button" class="btn btn-success btn-sm icon-left" disabled=""><i class="spinner-border spinner-border-sm mr-2"></i> Please wait...</button>
            </div>
        </div>
        <div class="card-body pt-3">
            <div class="row">
                <div class="col-lg-8 mx-auto">
                    <p>Please fill the fields to create a new category</p>

                    <div class="row">
                        <div class="col-12">
                            <div class="form-group">
                                <label class="control-label">Category name</label>
                                <div class="input-group mb-3 prepend-transparent">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text"><i class="mdi mdi-folder text-silver"></i></span>
                                    </div>
                                    <input type="text" class="form-control" id="cat-name" placeholder="Type category name">
                                </div>
                            </div>
                        </div>

                        <div class="col-12">
                            <div class="form-group">
                                <label class="control-label">Choose a parent</label>
                                <small class="text-muted d-block mb-2">Choose a parent page or category</small>
                                <div>
                                    <select class="selectpicker" data-width="100%" data-title="Select parent page or category">
                                        <option>Mustard</option>
                                        <option>Ketchup</option>
                                        <option>Barbecue</option>
                                        <option>Tent</option>
                                        <option>Flashlight</option>
                                        <option>Toilet Paper</option>
                                    </select>
                                </div>
                            </div>
                        </div>

                        <div class="col-12">
                            <div class="form-group">
                                <label class="control-label" for="exampleTextarea">Description</label>
                                <small class="text-muted d-block mb-2">Type description of your category in the field</small>
                                <textarea class="form-control" id="exampleTextarea" rows="3"></textarea>
                            </div>
                        </div>

                        <div class="col-12">
                            <div class="form-group">
                                <label class="control-label">Category Image</label>
                                
                                <small class="text-muted d-block mb-2">Upload image to your category or select from <a href="#" class="text-primary">Browse uploaded</a> or from <a href="#" class="text-primary">Media library</a></small>

                                <button class="btn btn-outline-success btn-sm">UPLOAD</button>                                
                            </div>
                        </div>

                        <div class="col-12">
                            <label class="control-label">Other settings</label>
                            <small class="text-muted d-block mb-2">Discover more advanced options</small>

                            <button class="btn btn-outline-secondary btn-sm btn-rounded" data-toggle="collapse" data-target="#show-more">Show more</button>

                            <div class="collapse mt-3" id="show-more">
                                <div class="row">
                                    <div class="col-12">
                                        <div class="form-group">
                                            <label class="control-label">Slug</label>
                                            <div class="mb-3">
                                                <input type="text" class="form-control">
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-sm-6">
                                        <div class="form-group">
                                            <label class="control-label">Can users create content <span class="help-tooltip" data-toggle="tooltip" title="Help tooltip"></span></label>

                                            <div>
                                                <div class="custom-control custom-radio d-inline-block mr-3">
                                                    <input type="radio" id="customRadio1" name="customRadio" class="custom-control-input" checked="">
                                                    <label class="custom-control-label" for="customRadio1">Yes</label>
                                                </div>
                                                <div class="custom-control custom-radio d-inline-block">
                                                    <input type="radio" id="customRadio2" name="customRadio" class="custom-control-input">
                                                    <label class="custom-control-label" for="customRadio2">No</label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-sm-6">
                                        <div class="form-group">
                                            <label class="control-label">Category subtype <span class="help-tooltip" data-toggle="tooltip" title="Help tooltip"></span></label>

                                            <div>
                                                <select class="selectpicker" data-width="100%">
                                                    <option>Default</option>
                                                    <option>Ketchup</option>
                                                    <option>Barbecue</option>
                                                    <option>Tent</option>
                                                    <option>Flashlight</option>
                                                    <option>Toilet Paper</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>

            <hr class="thin" />

            <div class="toolbar row">
                <div class="col-12 d-flex align-items-center">
                    <div class="text-start text-left w-100">
                        <a href="#" class="btn btn-outline-primary btn-sm icon-left"><i class="mdi mdi-arrow-left"></i> Back</a>
                    </div>
                    <div class="text-end text-right w-100">
                        <button type="button" class="btn btn-success btn-sm">Save</button>
                        <button type="button" class="btn btn-success btn-sm icon-left" disabled=""><i class="spinner-border spinner-border-sm mr-2"></i> Please wait...</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row copyright mt-3">
        <div class="col-12">
            <p class="text-muted text-center small">Open-source website builder and CMS Microweber 2020. Version: 1.18</p>
        </div>
    </div>
</main>


<?php include('partials/footer.php'); ?>
