<!DOCTYPE html>
<html lang="en"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorator="default" xmlns:th="http://www.w3.org/1999/xhtml" xmlns="http://www.w3.org/1999/html">
<head>

</head>
<body>

<div class="container" layout:fragment="content">

    <section id="paper">
        <div class="container">
            <div class="row">
                <div class="col-lg-12 text-center">
                    <h2 class="section-heading text-uppercase">Редактирование статьи</h2>
                    <div th:replace="papers/fragments/paperNavigationFragment"/>
                </div>
            </div>
            <hr/>
            <div class="row">
                <div class="col-lg-12">
                    <form id="paper-form" method="post" th:action="@{'/papers/paper?id='+ *{id == null ? '' : id} + ''}"
                          th:object="${paperDto}">
                        <div class="row">
                            <div class="col-md-7 col-sm-12">
                                <input type="hidden" name="id" th:field="*{id}"/>
                                <div class="form-group">
                                    <label for="title">Название:</label>
                                    <input class="form-control" id="title" type="text"
                                           placeholder="Название статьи"
                                           th:field="*{title}"/>
                                    <p th:if="${#fields.hasErrors('title')}" th:errors="*{title}"
                                       class="alert alert-danger">Incorrect title</p>
                                    <p class="help-block text-danger"></p>
                                </div>

                                <div class="form-group">
                                    <label for="status">Статус:</label>
                                    <select class="form-control" th:field="*{status}" id="status">
                                        <option th:each="status : ${allStatuses}" th:value="${status}"
                                                th:text="${status.statusName}">Status
                                        </option>
                                    </select>
                                </div>

                                <div class="form-group">
                                    <label for="comment">Комментарий:</label>
                                    <textarea class="form-control" rows="5" id="comment"
                                              th:field="*{comment}"></textarea>
                                </div>

                                <div class="form-group">
                                    <label>Дедлайны:</label>
                                    <div class="row" th:each="deadline, rowStat : *{deadlines}">
                                        <input type="hidden" th:field="*{deadlines[__${rowStat.index}__].id}"/>
                                        <div class="col-6">
                                            <input type="date" class="form-control" name="deadline"
                                                   th:field="*{deadlines[__${rowStat.index}__].date}"/>
                                        </div>
                                        <div class="col-4">
                                            <input class="form-control" type="text" placeholder="Описание"
                                                   th:field="*{deadlines[__${rowStat.index}__].description}"/>
                                        </div>
                                        <div class="col-2">
                                            <a class="btn btn-danger float-right"
                                               th:onclick="|$('#deadlines${rowStat.index}\\.description').val('');
                                                $('#deadlines${rowStat.index}\\.date').val('');
                                                $('#addDeadline').click();|"><span
                                                    aria-hidden="true"><i class="fa fa-times"/></span>
                                            </a>
                                        </div>
                                    </div>
                                    <p th:if="${#fields.hasErrors('deadlines')}" th:errors="*{deadlines}"
                                       class="alert alert-danger">Incorrect title</p>
                                </div>
                                <div class="form-group">
                                    <input type="submit" id="addDeadline" name="addDeadline" class="btn btn-primary"
                                           value="Добавить
                                    дедлайн"/>
                                </div>
                                <div class="form-group">
                                    <label>Авторы:</label>
                                    <select class="selectpicker form-control" multiple="true" data-live-search="true"
                                            title="-- Выберите авторов --"
                                            th:field="*{authorIds}">
                                        <option th:each="author: ${allAuthors}" th:value="${author.id}"
                                                th:text="${author.lastName}">Status
                                        </option>
                                    </select>
                                    <p th:if="${#fields.hasErrors('authorIds')}" th:errors="*{authorIds}"
                                       class="alert alert-danger">Incorrect title</p>
                                </div>
                                <div class="form-check">
                                    <input type="checkbox" class="form-check-input" id="locked"
                                           th:field="*{locked}"/>
                                    <label class="form-check-label" for="locked">Заблокирована</label>
                                </div>
                                <div class="form-group">
                                    <label for="loader">Загрузить статью:</label>
                                    <div id="loader">

                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4 offset-md-1 col-sm-12 offset-sm-0">
                                <div class="form-group">
                                    <div class="row">
                                        <div class="col">
                                            <h6 class="my-0">Дата создания:</h6>
                                        </div>
                                        <div class="col">
                                            <small class="text-muted"
                                                   th:text="${paperDto.createDate == null ? '' : #dates.format(paperDto.createDate, 'dd.MM.yyyy HH:mm')}">
                                                text
                                            </small>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="row">
                                        <div class="col">
                                            <h6 class="my-0">Дата изменения:</h6>
                                        </div>
                                        <div class="col">
                                            <small class="text-muted"
                                                   th:text="${paperDto.updateDate == null ? '' : #dates.format(paperDto.updateDate, 'dd.MM.yyyy HH:mm')}">
                                                text
                                            </small>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <button id="pingButton" class="btn btn-primary text-uppercase"
                                            type="button">
                                        Ping авторам
                                    </button>
                                </div>
                            </div>

                            <div class="clearfix"></div>
                            <div class="col-lg-12">
                                <div class="form-group">
                                    <button id="sendMessageButton" name="save"
                                            class="btn btn-success text-uppercase"
                                            type="submit">
                                        Сохранить
                                    </button>
                                    <a id="cancelButton" class="btn btn-default text-uppercase"
                                       href="/papers/papers">
                                        Отмена
                                    </a>
                                </div>

                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </section>
    <script type="text/javascript" src="/js/file-loader.js"></script>
    <script>
        /*<![CDATA[*/
        $(document).ready(function () {
            new FileLoader({
                div: "loader",
                url: urlFileUpload,
                maxSize: 1.5,
                extensions: ["doc", "docx", "xls", "jpg", "pdf", "txt", "png"],
                callback: function (response) {
                    showFeedbackMessage("Файл успешно загружен");
                    console.debug(response);
                }
            });
            $('.selectpicker').selectpicker();
        });
        /*]]>*/
    </script>
</div>

</body>

</html>
