{% extends "layout.html" %}
{% block main %}
<h1 class="h3"><i class="fas fa-pen mr-2"></i>{{ title }}</h1>
{% for content in contents %}
  <div class="table__block">
    <h4 class="h4 mb-0">區塊{{ loop.index }}</h4>
    <span class="btn__opentab"><i class="fas fa-chevron-down"></i></span>
    <form action="{{ url_for(form_url, page=page, section_class=content.sectionClass) }}" method="POST" enctype="multipart/form-data" class="form__action">      
      <table id="manage_table" class="table table__content mb-0">
        <thead>
          <tr>
            <th class="table__head" width="80">順序</th>
            <th class="table__head" width="120">類型</th>
            <th class="table__head">內容</th>
            <th style="width:150px;" class="table__head">
            </th>
          </tr>
        </thead>
        {% for key, value in content.items() %}
          {% if key != 'sectionClass' %}
            {% for data in value %}
              <tbody>
                <tr>
                  <input name="element" type="hidden" value="{{ key }}">
                  <td class="table__data">{{ loop.index }}</td>
                  {% if key == "img" %}
                    <td class="table__data"><span class="badge badge-pill badge__img">圖片</span></td>
                    <td class="table__data" style="display:flex;justify-content:center">
                      <div class="img__table"><img src="{{ bhouse_server }}/{{ data['src'] }}" width="100%" height="100%"></div>
                    </td>
                    <td class="table__data">
                      <div class="d-flex justify-content-center">
                        <button type="button" class="btn__edit  m-1">
                          <i class="fas fa-edit"></i>
                        </button>
                        <div class="modal fade" id="manage_modal" tabindex="-1" role="dialog" aria-labelledby="Label" 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="exampleModalLabel">編輯</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">
                                <input id="image" name="image" type="file" value="{{ data['src'] }}">
                                <input name="data" type="hidden" value="{{ data }}">
                                <div class="modal__img"><img src="{{ bhouse_server }}/{{ data['src'] }}"></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>
                              </div>
                            </div>
                          </div>
                        </div>
                        <form action="#" method="POST">
                          <button class="btn__delete m-1" type="submit" value="delete"><i class="fas fa-trash-alt"></i></button>
                        </form>
                      </div>
                    </td>
                  {% elif key == "yt_video" %}
                    <td class="table__data"><span class="badge badge-pill badge__video">影片</span></td>
                    <td class="table__data">
                      {{ data['videoid'] }}
                    </td>
                    <td class="table__data">
                      <div class="d-flex justify-content-center">
                        <button type="button" class="btn__edit  m-1">
                          <i class="fas fa-edit"></i>
                        </button>
                        <div class="modal fade" id="manage_modal" tabindex="-1" role="dialog" aria-labelledby="Label" 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="exampleModalLabel">編輯</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">
                                <input name="data" class="form-control form-control-lg " value="{{ data }}">
                                <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>
                              </div>
                            </div>
                          </div>
                        </div>
                        <form action="#" method="POST">
                          <button class="btn__delete m-1" type="submit" value="delete"><i class="fas fa-trash-alt"></i></button>
                        </form>
                      </div>
                    </td>
                  {% else %}
                  <td class="table__data"><span class="badge badge-pill badge__txt">文字</span></td>
                  <td class="table__data txt__cut">
                    <div>{{ data }}</div>
                  </td>
                  <td class="table__data">
                    <div class="d-flex justify-content-center">
                      <button data_element="{{ key }}" data="{{ data }}" type="button" class="btn__edit  m-1">
                        <i class="fas fa-edit"></i>
                      </button>
                      <div class="modal fade" id="manage_modal" tabindex="-1" role="dialog" aria-labelledby="Label" 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="exampleModalLabel">編輯</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">
                              <input name="data" class="form-control form-control-lg modal__text__input" value="{{ data }}">
                              <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>
                            </div>
                          </div>
                        </div>
                      </div>
                      <form action="#" method="POST">
                        <button class="btn__delete m-1" type="submit" value="delete"><i class="fas fa-trash-alt"></i></button>
                      </form>
                    </div>
                  </td>
                  {% endif %}
                </tr>
              </tbody>
            {% endfor %}
          {% endif %}
        {% endfor %}
      </table>
    </form>
  </div>
{% endfor %}
<script>
  for (const tbody of document.querySelectorAll('tbody')) {
    const btn = tbody.querySelector(".m-1")
    btn.onclick = function() {
      $(tbody).find('#manage_modal').modal("toggle");
    }
  }
</script>
{% endblock main %}
