tab with latex editing

src/main/resources/public/css/paper.css

@@ -3,3 +3,7 @@
     justify-content: center;
     flex-direction: column;
 }
+
+.nav-tabs {
+    margin-bottom: 20px;
+}

src/main/resources/templates/papers/paper.html

@@ -23,7 +23,19 @@
                     <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">
+                                <nav>
+                                    <div class="nav nav-tabs" id="nav-tab" role="tablist">
+                                        <a class="nav-item nav-link active" id="nav-main-tab" data-toggle="tab"
+                                           href="#nav-main" role="tab" aria-controls="nav-main" aria-selected="true">Статья</a>
+                                        <a class="nav-item nav-link" id="nav-latex-tab" data-toggle="tab"
+                                           href="#nav-latex" role="tab" aria-controls="nav-latex" aria-selected="false">Latex</a>
+                                    </div>
+                                </nav>
+                                <div class="tab-content" id="nav-tabContent">
+                                    <div class="tab-pane fade show active" id="nav-main" role="tabpanel"
+                                         aria-labelledby="nav-main-tab">
                                         <input type="hidden" name="id" th:field="*{id}"/>
                                         <div class="form-group">
                                             <label for="title">Название:</label>
@@ -75,13 +87,15 @@
                                                class="alert alert-danger">Incorrect title</p>
                                         </div>
                                         <div class="form-group">
-                                    <input type="submit" id="addDeadline" name="addDeadline" class="btn btn-primary"
+                                            <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"
+                                            <select class="selectpicker form-control" multiple="true"
+                                                    data-live-search="true"
                                                     title="-- Выберите авторов --"
                                                     th:field="*{authorIds}">
                                                 <option th:each="author: ${allAuthors}" th:value="${author.id}"
@@ -98,9 +112,12 @@
                                                 <div class="row" th:id="|files${rowStat.index}|"
                                                      th:style="${file.deleted} ? 'display: none;' :''">
                                                     <input type="hidden" th:field="*{files[__${rowStat.index}__].id}"/>
-                                            <input type="hidden" th:field="*{files[__${rowStat.index}__].deleted}"/>
-                                            <input type="hidden" th:field="*{files[__${rowStat.index}__].name}"/>
-                                            <input type="hidden" th:field="*{files[__${rowStat.index}__].tmpFileName}"/>
+                                                    <input type="hidden"
+                                                           th:field="*{files[__${rowStat.index}__].deleted}"/>
+                                                    <input type="hidden"
+                                                           th:field="*{files[__${rowStat.index}__].name}"/>
+                                                    <input type="hidden"
+                                                           th:field="*{files[__${rowStat.index}__].tmpFileName}"/>
                                                     <div class="col-2">
                                                         <a class="btn btn-danger float-right"
                                                            th:onclick="|$('#files${rowStat.index}\\.deleted').val('true'); $('#files${rowStat.index}').hide(); |">
@@ -131,6 +148,20 @@
                                             </div>
                                         </div>
                                     </div>
+                                    <div class="tab-pane fade" id="nav-latex" role="tabpanel"
+                                         aria-labelledby="nav-profile-tab">
+                                        <div class="form-group">
+                                            <label for="latex-text">Текст:</label>
+                                            <textarea class="form-control" id="latex-text" type="text" rows="10"
+                                                      placeholder="Latex.."
+                                                      th:field="*{latexText}"/>
+                                        </div>
+
+                                    </div>
+
+                                </div>
+
+                            </div>
                             <div class="col-md-4 offset-md-1 col-sm-12 offset-sm-0">
                                 <div class="form-group">
                                     <div class="row">