<!DOCTYPE html>
<html lang="en"
      th:replace="~{admin/dashboard/layout:: parent(~{::#content},~{::title},~{::script})}">
<head>
    <title>Update Post</title>
</head>
<body>
<section class="content" id="content">
    <form role="form" th:action="@{/admin/posts/update}" enctype="multipart/form-data" method="post" th:object="${post}">
        <div class="row">
            <div class="col-md-7">
                <div class="card card-primary">
                    <div class="card-header">
                        <h3 class="card-title">Update Post</h3>

                        <div class="card-tools">
                            <button type="button" class="btn btn-tool" data-card-widget="collapse" title="Collapse">
                                <i class="fas fa-minus"></i>
                            </button>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="form-group">
                            <label for="name">Id</label>
                            <input type="text" data-th-field="*{postId}" id="postId" class="form-control form-control-plaintext" readonly  />
                            <p th:if="${#fields.hasErrors('postId')}" th:errors="*{postId}"></p>
                        </div>
                        <div class="form-group">
                            <label for="name">Title</label>
                            <input type="text" data-th-field="*{name}" id="name" class="form-control" placeholder="Enter name here" required />
                            <p th:if="${#fields.hasErrors('name')}" th:errors="*{name}"></p>
                        </div>
                        <div class="form-group">
                            <label for="slug">Slug</label>
                            <input type="text" data-th-field="*{slug}" id="slug" class="form-control"  readonly />
                            <p th:if="${#fields.hasErrors('slug')}" th:errors="*{slug}"></p>
                        </div>

                        //view image
                        //delete image
                        //upload new image
                        <div class="form-group">
                            <label for="exampleInputFile">Featured Image</label>
                            <div class="input-group">
                                <div class="custom-file">
                                    <input type="file" class="custom-file-input" name="image" accept="image/*"  id="exampleInputFile" />
                                    <label class="custom-file-label" for="exampleInputFile">Select Image</label>
                                </div>
                                <div class="input-group-append">
                                    <span class="input-group-text">Upload</span>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="publishedStatus">Status:</label>
                            <div class="input-group ">
                                <select th:field="*{publishedStatus}" id="publishedStatus" class="form-control" style="width: 100%;">
                                    <option value="" disabled>Select Post Status</option>
                                    <option value="YES">Published</option>
                                    <option value="NO">Draft</option>
                                </select>
                            </div>

                        </div>
                    </div><!-- /.card-body -->

                </div>
                <!-- /.card -->
            </div>
            <div class="col-md-5">
                <div class="card card-primary">
                    <div class="card-header">
                        <h3 class="card-title">Categories and Tags</h3>
                        <div class="card-tools">
                            <button type="button" class="btn btn-tool" data-card-widget="collapse" title="Collapse">
                                <i class="fas fa-minus"></i>
                            </button>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="form-group">
                            <label>Select Multiple Category</label>
                            <select class="select2" multiple="multiple" th:field="${categories}" data-placeholder="Select a State" style="width: 100%;">
                                <option value="" disabled>Select Categories</option>
                                <option th:each="category : ${categories}"
                                        th:value="${category.categoryId}"
                                        th:text="${category.name}">
                                </option>
                            </select>

                        </div>
                        <!-- /.form-group -->
                        <div class="form-group">
                            <label>Select Multiple Tags</label>
                            <select class="select2" multiple="multiple" th:field="${tags}" data-placeholder="Select a Tag" style="width: 100%;">
                                <option value="" disabled>Select Tags</option>
                                <option th:each="tag : ${tags}"
                                        th:value="${tag.tagId}"
                                        th:text="${tag.name}">
                                </option>
                            </select>
                        </div> <!-- /.form-group -->
                    </div><!-- /.col -->
                </div>

            </div><!-- /.card -->
        </div>
        <div class="row">

            <div class="col-md-12">
                <div class="card card-primary">
                    <div class="card-header">
                        <h3 class="card-title">Body</h3>

                        <div class="card-tools">
                            <button type="button" class="btn btn-tool" data-card-widget="collapse" title="Collapse">
                                <i class="fas fa-minus"></i>
                            </button>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="form-group">
                            <textarea class="form-control" id="default" rows="20" data-th-field="*{body}" placeholder="Enter ..."></textarea>
                        </div>
                    </div>
                    <!-- /.col -->
                </div>
                <!-- /.row -->
            </div>
        </div>
        <div class="row">
            <div class="col-12">
                <a href="#" class="btn btn-secondary">Cancel</a>
                <input type="submit" value="Create new Post" class="btn btn-success float-right">
            </div>
        </div>
        <br />
    </form>
</section>
<br />
</body>

</html>
