add modal with form element for creating new content

backstage/templates/collections.html

@@ -8,9 +8,9 @@
       <th>標題</th>
       <th>順序</th>
       <th>顯示</th>
-      <th style="text-align:center;width:100px;">新增 <button type="button" data-func="dt-add" class="btn btn-success btn-xs dt-add">
-          <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
-        </button></th>
+      <th style="text-align:center;width:100px;">
+        <button type="button" class="btn btn-primary btn-sm m-1" data-toggle="modal" data-target="#createModal">新增</button>
+      </th>
     </tr>
   </thead>
   {% for idx in range(0, length) %}
@@ -32,4 +32,28 @@
     </tbody>
   {% endfor %}
 </table>
+<!-- Modal -->
+<div class="modal fade" id="createModal" tabindex="-1" role="dialog" aria-labelledby="createModalLabel" aria-hidden="true">
+  <div class="modal-dialog" role="document">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title" id="createModalLabel">Create new content</h5>
+      </div>
+      <form action="{{ url_for('editor.create_collection') }}" method="POST" enctype="multipart/form-data">
+        <div class="form-group">
+          {{ form.title.label(class="form-control-label") }}
+          {{ form.title(class="form-control form-control-lg") }}
+          {{ form.image.label(class="form-control-label") }}
+          {{ form.image(class="form-control form-control-lg") }}
+          {{ form.description.label(class="form-control-label") }}
+          {{ form.description(class="form-control form-control-lg") }}
+        </div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+          <input class="btn btn-primary" type="submit" value="Create">
+        </div>
+      </form>
+    </div>
+  </div>
+</div>
 {% endblock main %}