{% extends "layout.html" %}
{% block main %}
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://jqueryui.com/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript" src="{{url_for('static', filename='config.js')}}"></script>
<h1 class="h3"><i class="far fa-newspaper mr-3"></i>{{ title }}</h1>
<table id="example" class="table" cellspacing="0" width="60%">
  <thead>
    <tr>
      <th class="table__head">#</th>
      <th class="table__head">標題</th>
      <th class="table__head">日期</th>
      <!-- <th class="table__head">順序</th> -->
      <th class="table__head">顯示</th>
      <th style="width:150px;" class="table__head">
        <button type="button" class="btn__add m-1" data-toggle="modal" data-target="#createModal"><i
            class="fas fa-plus"></i></button>
      </th>
    </tr>
  </thead>
  {% block table_body %}{% endblock %}
</table>


{% block main_info_modal_body %}{% endblock %}
<!-- <div class="modal fade" id="myModal">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">

      <div class="modal-header">
        <h4 class="modal-title">主資訊修改</h4>
        <button type="button" class="close" data-dismiss="modal">×</button>
      </div>

      <div class="modal-body">
        <table class="table table-bordered">
          <tbody>
            <tr>
              <td>
                <h4>標題</h4>
              </td>
              <td><input class="form-control" id="ctitle" type="text" />
                <div class="mt-1 text-danger">（建議字數：15 字內）</div>
              </td>
            </tr>
            <tr>
              <td>
                <h4>圖片</h4>
              </td>
              <td>
                <input class="form-control" id="cfile" type="file" />
                <div class="mt-1 text-danger">（建議尺寸/比例：寬 2048px * 高 1365px）</div>
              </td>
            </tr>
            <tr id='sdesc'>
              <td>
                <h4>描述</h4>
              </td>
              <td><textarea class="form-control" rows="3" id="cdescription"></textarea>
                <div class="mt-1 text-danger">（建議字數：50 字內）</div>
              </td>
            </tr>
            <tr>
              <tr id='scat'>
                <td>
                  <h4>文章分類</h4>
                </td>
                <td><textarea class="form-control" rows="1" id="ccategories"></textarea>
                  <div class="mt-1 text-danger">（建議字數：15 字內）</div>
                </td>
              </tr>
              <tr>
              <td>
                <h4>日期</h4>
              </td>
              <td><input class="form-control" id="cdate" type="text" /></td>
            </tr>
            <tr>
              <td>
                <h4>是否顯示</h4>
              </td>
              <td><input id="cdraft" type="checkbox" checked="true" /></td>
            </tr>
          </tbody>
        </table>
        <div class="d-none">
          <input id="ctype" type="text" /><br />
          <input id="curl" type="text" /><br />
          <input id="cimage" type="text" /><br />
          <input id="cweight" type="text" /><br />
          <input id="ctag" type="text" /><br />
          <input id="ccategories" type="text" /><br />
          <input id="ccol1" type="text" /><br />
          <input id="ccol2" type="text" /><br />
        </div>
      </div>

      <div class="modal-footer">
        <button type="button" id="uptbtn" class="btn btn-danger" onclick="updateHeader();">完成修改</button>
      </div>

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

<!-- <div id="dialog-form">
  <input id="ctitle" type="text" /><br />
  <input id="cdate" type="text" /><br />
  <input id="cdraft" type="checkbox" checked="true" /><br />
  <input id="ctype" type="text" /><br />
  <input id="curl" type="text" /><br />
  <input id="cimage" type="text" /><br />
  <input id="cdescription" type="text" /><br />
  <input id="cweight" type="text" /><br />
  <input id="ctag" type="text" /><br />
  <button onclick="updateHeader();location.reload();">完成修改</button>
</div> -->
<script>
  oTitle = "";
  editTarget = "";
  frontMatters = [];
  contentMatters = [];
  //const contentApiUrl = `${PORTAL_SERVER}contents?url=`;

  //allObjs = JSON.parse(htmlDecode('{{ collections }}'));
  //console.log(htmlDecode('{{ collections }}'));

</script>

<!-- Modal -->
<div class="modal fade" id="createModal" tabindex="-1" role="dialog" aria-labelledby="createModalLabel"
  aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header border-0">
        <h5 class="modal-title modal__title" id="createModalLabel">新增</h5>
        <button type="button" class="close modal__close" data-dismiss="modal" aria-label="Close">
          <span class="modal__close__back">
            <span aria-hidden="true">&times;</span>
          </span>
        </button>
      </div>
      <div class="modal-body">
        {% block modal_body %}{% endblock %}
      </div>
    </div>
  </div>
</div>
{% endblock main %}