{% 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) %}
<tbody>
  <tr>
    <td class="table__data">{{ idx + 1 }}</td>
    <td class="table__data">
      {{ collections[idx].title }}
      {% if collections[idx].url == '/collection' %}
      <span class="badge bg-secondary text-white ml-2">根目錄</span>
      <span class="badge bg-danger text-white">請勿刪除</span>
      {% endif %}
    </td>
    <td class="table__data">{{ collections[idx].date }}</td>
    <!-- <td class="table__data">1</td> -->
    <td class="table__data"><input type="checkbox" {{ 'checked' if (collections[idx].draft.lower()=='false' ) }}
        onclick="toggleDraft(this,'{{ collections[idx].url }}');" /></td>
    <td>
      <div class="d-flex justify-content-center">
        <button class="btn btn_light mr-1 blog-btn" onclick="getHeader('{{ collections[idx].url }}');"><b>主資訊</b> <i
            class="fas fa-pencil-alt"></i></button>
        <a class="m-1 btn__edit" href="{{ url_for('editor.editor', url=collections[idx].url) }}"><i
            class="fas fa-edit"></i></a>
        <form action="{{ url_for('collections.remove', url=collections[idx].url) }}" method="POST" 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>
{% endfor %}
{% endblock table_body %}

<!-- Modal -->
{% block modal_body %}
<form action="{{ url_for('collections.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.description.label(class="form-control-label modal__label mt-3 mb-1") }} <span class="text-danger">(建議字數:
      30字內)</span>
    {{ form.description(class="form-control form-control-lg textarea") }}

    {{ form.collectiontitle.label(class="form-control-label modal__label mb-1") }}
    {{ form.collectiontitle(class="form-control form-control-lg") }}

    {{ form.collectiondesc.label(class="form-control-label modal__label mt-3 mb-1") }} <span class="text-danger">(建議字數:
      133字內)</span>
    {{ form.collectiondesc(class="form-control form-control-lg textarea") }}

    {{ form.image.label(class="form-control-label modal__label mt-3 mb-1") }} <span class="text-danger">(建議尺寸/比例:
      寬2048px * 高1365px)</span>
    {{ form.image(class="form-control form-control-lg modal__file") }}

    {{ form.tags.label(class="form-control-label modal__label mb-1 d-none") }}
    {{ form.tags(class="form-control form-control-lg d-none") }}

    {{ form.coverimg.label(class="form-control-label modal__label mt-3 mb-1") }} <span class="text-danger">(建議尺寸/比例:
      寬____px * 高____px)</span>
    {{ form.coverimg(class="form-control form-control-lg modal__file") }}

    {{ form.bannerimgtext.label(class="form-control-label modal__label mt-3 mb-1") }}
    {{ form.bannerimgtext(class="form-control form-control-lg") }}

    {{ form.homeowner.label(class="form-control-label modal__label mt-3 mb-1") }}
    {{ form.homeowner(class="form-control form-control-lg") }}

    {{ form.ownerimg.label(class="form-control-label modal__label mt-3 mb-1") }} <span class="text-danger">(若無屋主照片則免填)</span>
    {{ form.ownerimg(class="form-control form-control-lg") }}

    {{ form.size.label(class="form-control-label modal__label mt-3 mb-1") }}
    {{ form.size(class="form-control form-control-lg") }}

    {{ form.housesize.label(class="form-control-label modal__label mt-3 mb-1") }}
    {{ form.housesize(class="form-control form-control-lg") }}

    {{ form.bednum.label(class="form-control-label modal__label mt-3 mb-1") }}
    {{ form.bednum(class="form-control form-control-lg") }}

    {{ form.roomcount.label(class="form-control-label modal__label mt-3 mb-1") }}
    {{ form.roomcount(class="form-control form-control-lg") }}

    {{ form.housetype.label(class="form-control-label modal__label mt-3 mb-1") }}
    {{ form.housetype(class="form-control form-control-lg") }}

    {{ form.space.label(class="form-control-label modal__label mt-3 mb-1") }}
    {{ form.space(class="form-control form-control-lg") }}

    {{ form.loc.label(class="form-control-label modal__label mt-3 mb-1") }}
    {{ form.loc(class="form-control form-control-lg") }}

    {{ form.designer.label(class="form-control-label modal__label mt-3 mb-1") }}
    {{ form.designer(class="form-control form-control-lg") }}

    {{ form.budgetr.label(class="form-control-label modal__label mt-3 mb-1") }}
    {{ form.budgetr(class="form-control form-control-lg") }}

    {{ form.budget.label(class="form-control-label modal__label mt-3 mb-1") }}
    {{ form.budget(class="form-control form-control-lg") }}

    {{ form.construction.label(class="form-control-label modal__label mt-3 mb-1") }}
    {{ form.construction(class="form-control form-control-lg") }}

    <span class="d-none">
    {{ form.comment.label(class="form-control-label modal__label mt-3 mb-1") }}
    {{ form.comment(class="form-control form-control-lg modal__file") }}
  </span>

  </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 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>Meta 標題</h4>
              </td>
              <td><input class="form-control" id="cmetattl" type="text" />
              </td>
            </tr>
            <tr>
              <td>
                <h4>Meta 說明</h4>
              </td>
              <td><input class="form-control" id="cmetadsc" type="text" />
              </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">（建議字數：30 字內）</div>
              </td>
            </tr>
            <tr>
              <td>
                <h4>作品集標題</h4>
              </td>
              <td><input class="form-control" id="ccollname" type="text" />
              </td>
            </tr>
            <tr>
              <td>
                <h4>日期</h4>
              </td>
              <td><input class="form-control" id="cdate" type="text" /></td>
            </tr>
            <tr>
            <tr>
              <td>
                <h4>作品集描述</h4>
              </td>
              <td><textarea class="form-control" rows="3" id="ccolldesc"></textarea>
              </td>
            </tr>
            <tr>
              <td>
                <h4>圖片</h4>
              </td>
              <td>
                <input class="form-control" id="cfile" type="file" />
                <div class="mt-1 text-danger mb-2">（建議尺寸/比例：寬 2048px * 高 1365px）</div>
                <img src="" alt="" width="300" id="cfile-file">
              </td>
            </tr>
            <tr>
              <td>
                <h4>分類</h4>
              </td>
              <td><input class="form-control" id="ctags" type="text" />
              </td>
            </tr>--
            <tr>
              <td>
                <h4>封面圖片</h4>
              </td>
              <td>
                <input class="form-control" id="cnewcoverimg" type="file" />
                <div class="mt-1 text-danger mb-2">（建議尺寸/比例：寬 ____px * 高 ____px）</div>
                <img src="" alt="" width="300" id="cnewcoverimg-file">
              </td>
            </tr>
            <tr>
              <td>
                <h4>封面圖片說明</h4>
              </td>
              <td><input class="form-control" id="ccoverimgtxt" type="text" />
              </td>
            </tr>
            <tr>
              <td>
                <h4>屋主</h4>
              </td>
              <td><input class="form-control" id="chomeowner" type="text" />
              </td>
            </tr>
            <tr>
              <td>
                <h4>屋主照片</h4>
              </td>
              <td class="d-flex flex-column">
                <input class="form-control mb-2" id="cnewownerimg" type="file" />
                <img src="" alt="" width="300" id="cnewownerimg-file">
                <button id="removeOwnerImg" type="button" class="btn btn_light mt-2">移除前台屋主照片</button>
              </td>
            </tr>
            <tr>
              <td>
                <h4>坪數範圍</h4>
              </td>
              <td><select id="csize">
                <option value="20坪以下">20坪以下</option>
                <option value="20-35坪">20-35坪</option>
                <option value="36-50坪">36-50坪</option>
                <option value="51坪以上">51坪以上</option>
              </select></td>
            </tr>
            </td>
            </tr>
            <tr>
              <td>
                <h4>坪數</h4>
              </td>
              <td><input class="form-control" id="chousesize" type="text" /></td>
            </tr>
            <tr>
              <td>
                <h4>格局</h4>
              </td>
              <td><select id="cbednum">
                  <option value="一房">一房</option>
                  <option value="二房">二房</option>
                  <option value="三房">三房</option>
                  <option value="四房">四房</option>
                  <option value="四房以上">四房以上</option>
                </select>
              </td>
            </tr>
            <tr>
              <td>
                <h4>幾房幾廳?</h4>
              </td>
              <td><input class="form-control" id="croomcount" type="text" /></td>
            </tr>
            <tr>
              <td>
                <h4>類型</h4>
              </td>
              <td><select id="chousetype">
                  <option value="大樓">大樓</option>
                  <option value="透天">透天</option>
                </select></td>
            </tr>
            <tr>
              <td>
                <h4>設計師</h4>
              </td>
              <td><input class="form-control" id="cdesigner" type="text" /></td>
            </tr>
            <tr>
              <td>
                <h4>設計空間</h4>
              </td>
              <td><textarea class="form-control" id="cspace" rows="2" type="text"></textarea></td>
            </tr>
            <tr>
              <td>
                <h4>地點</h4>
              </td>
              <td><select id="cloc">
                  <option value="台北">台北</option>
                  <option value="新北">新北</option>
                  <option value="基隆">基隆</option>
                  <option value="桃園">桃園</option>
                  <option value="新竹">新竹</option>
                  <option value="苗栗">苗栗</option>
                  <option value="台中">台中</option>
                  <option value="南投">南投</option>
                  <option value="彰化">彰化</option>
                  <option value="雲林">雲林</option>
                  <option value="嘉義">嘉義</option>
                  <option value="台南">台南</option>
                  <option value="高雄">高雄</option>
                  <option value="屏東">屏東</option>
                  <option value="宜蘭">宜蘭</option>
                  <option value="花蓮">花蓮</option>
                  <option value="台東">台東</option>
                  <option value="澎湖">澎湖</option>
                  <option value="金門">金門</option>
                  <option value="馬祖">馬祖</option>
                  <option value="其他">其他</option>
                </select></td>
            </tr>
            <tr>
              <td>
                <h4>預算範圍</h4>
              </td>
              <td><select id="cbudgetr">
                <option value="59萬以下">59萬以下</option>
                <option value="60-79萬">60-79萬</option>
                <option value="80-99萬">80-99萬</option>
                <option value="100萬以上">100萬以上</option>
              </select></td>
            </tr>
            <tr>
              <td>
                <h4>詳細預算</h4>
              </td>
              <td><input class="form-control" id="cbudget" type="text" /></td>
            </tr>
            <tr>
              <td>
                <h4>建案名稱</h4>
              </td>
              <td><input class="form-control" id="cconstruction" type="text" /></td>
            </tr>
            <!-- <td>
              <h4>作品集圖片集1</h4>
            </td>
            <td>
              <div class="form-control" id="editorjs1" style='border:inset 1px;'></div>
            </td> -->
            <tr>
              <td>
                <h4>是否顯示</h4>
              </td>
              <td><input id="cdraft" type="checkbox" checked="true" /></td>
            </tr>
            <tr class="d-none">
              <td>
                <h4>Comment</h4>
              </td>
              <td>
                <input class="form-control" id="cnewcomment" type="file" />
                <div class="mt-1 text-danger">（建議尺寸/比例：寬 2048px * 高 1365px）</div>
              </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="ctags" type="text" /><br />
          <input id="ccategories" type="text" /><br />
          <input id="ccol1" type="text" /><br />
          <input id="ccol2" type="text" /><br />
          <input id="ccoverimg" type="text" /><br />
          <input id="ccollslider" type="text" /><br />
          <input id="ccomment" type="text" /><br />
          <input id="cfile" type="text" /><br />
          <input id="cownerimg" 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>
<script>

</script>
{% endblock %}