{% extends "tables/editor_table.html" %}
{% block table_body %}
<script src="https://cdn.jsdelivr.net/npm/@editorjs/editorjs@latest"></script>
<script src="https://cdn.jsdelivr.net/npm/@editorjs/image@latest"></script><!-- Image -->
<script type="text/javascript" src="/static/js/yo.js"></script>
{% for idx in range(0, length) %}
{% if blogs[idx].url != '/blogs' %}
<tbody>
  <tr>
    <td class="table__data">{{ idx+1 }}</td>
    <td class="table__data">{{ blogs[idx].title }}</td>
    <td class="table__data">{{ blogs[idx].date }}</td>
    <td class="table__data"><input type="checkbox" {{ 'checked' if (blogs[idx].draft.lower()=='false' ) }}
        onclick="toggleDraft(this,'{{ blogs[idx].url }}');" /></td>
    <td>
      <div class="d-flex justify-content-center">
        <button class="btn btn_light mr-1" onclick="getHeader('{{ blogs[idx].url }}');"><b>主資訊</b> <i
            class="fas fa-pencil-alt"></i></button>
        <a class="m-1 btn__edit" href="{{ url_for('editor.editor', url=blogs[idx].url) }}"><i
            class="fas fa-edit"></i></a>
        <form action="{{ url_for('blogs.remove', url=blogs[idx].url) }}" method="POST" class="m-1 inline_block">
          <button class="btn__delete" type="submit" value="delete" onclick=" return confirm('確定要刪除此專欄文章?');"><i
              class="fas fa-trash-alt"></i></button>
        </form>
      </div>
    </td>
  </tr>
</tbody>
{% endif %}
{% endfor %}
{% endblock table_body %}
{% block modal_body %}
<form action="{{ url_for('blogs.create') }}" method="POST" enctype="multipart/form-data">
  <div class="form-group">
    {{ form.title.label(class="form-control-label modal__label mb-1") }} <span class="text-danger">（建議字數：15 字內）</span>
    {{ form.title(class="form-control form-control-lg") }}
    {{ form.image.label(class="form-control-label modal__label mt-3 mb-1") }} <span class="text-danger">(建議尺寸/比例:
      寬2664px * 高956px)</span>
    {{ form.image(class="form-control form-control-lg modal__file") }}
    {{ form.categories.label(class="form-control-label modal__label mt-3 mb-1") }}
    {{ form.categories(class="form-control form-control-lg") }}
  </div>
  <div class="modal-footer pb-0 border-0">
    <button type="button" class="btn btn__cancel" data-dismiss="modal">取消</button>
    <input class="btn btn__submitadd" type="submit" value="完成">
  </div>
</form>
{% endblock modal_body %}

{% block main_info_modal_body %}
<div class="modal fade" id="myModal">
  <div class="modal-dialog">
    <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>Meta 標題</h4>
              </td>
              <td><input class="form-control" id="cmetattl" type="text" />
              </td>
            </tr>
            <tr>
              <td>
                <h4>說明</h4>
              </td>
              <td><textarea class="form-control" id="cdescription" rows=2 type="paragraph"></textarea>
              </td>
            </tr>
            <tr>
              <td>
                <h4>Meta 說明</h4>
              </td>
              <td><input class="form-control" id="cmetadsc" type="text" />
              </td>
            </tr>
            <tr>
              <td>
                <h4>圖片</h4>
              </td>
              <td>
                <input class="form-control" id="cfile" type="file" />
                <div class="mt-1 text-danger">(建議尺寸/比例: 寬2664px * 高956px)</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><textarea class="form-control" id="cintroduction" type="paragraph"></textarea>
                <div class="mt-1">文章前言說明</div>
              </td>
            </tr>
            <tr>
              <td>
                <h4>目錄說明</h4>
              </td>
              <td><input class="form-control" id="cquestionboxintro" type="text" />
                <div class="mt-1">目錄使用，將說明本文章可以解決的問題</div>
              </td>
            </tr>
            <tr>
              <td>
                <h4>是否顯示</h4>
              </td>
              <td><input id="cdraft" type="checkbox"/></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="ccaturl" 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>
{% endblock %}