{% extends "layout.html" %}
{% block main %}
<!-- <script type="text/javascript" src="/static/config.js"></script> -->
<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>
<style>
  .table__data {
    padding: 5px;
  }
</style>
<table>
  <tbody id='contactData'>
    <h1 class="h3"><i class="fas fa-pen mr-3 mb-3"></i>{{ title }}</h1>
    <tr>
      <td>文章名稱 <span class="text-danger">（請務必填寫文章名稱，否則此項文章不予載入）</span></td>
      <td>文章連結</td>
    </tr>
    <tr>
      <td class="table__data"><input class="form-control" id="data01" type="text" style="width: 600px;"
          placeholder="文章內容" /></td>
      <td class="table__data"><input class="form-control" id="data00" type="text" style="width: 600px;"
          placeholder="文章連結" /></td>
    </tr>
    <tr>
      <td class="table__data"><input class="form-control" id="data11" type="text" style="width: 600px;"
          placeholder="文章內容" /></td>
      <td class="table__data"><input class="form-control" id="data10" type="text" style="width: 600px;"
          placeholder="文章連結" /></td>
    </tr>
    <tr>
      <td class="table__data"><input class="form-control" id="data21" type="text" style="width: 600px;"
          placeholder="文章內容" /></td>
      <td class="table__data"><input class="form-control" id="data20" type="text" style="width: 600px;"
          placeholder="文章連結" /></td>
    </tr>
    <tr>
      <td class="table__data"><input class="form-control" id="data31" type="text" style="width: 600px;"
          placeholder="文章內容" /></td>
      <td class="table__data"><input class="form-control" id="data30" type="text" style="width: 600px;"
          placeholder="文章連結" /></td>
    </tr>
    <tr>
      <td class="table__data"><input class="form-control" id="data41" type="text" style="width: 600px;"
          placeholder="文章內容" /></td>
      <td class="table__data"><input class="form-control" id="data40" type="text" style="width: 600px;"
          placeholder="文章連結" /></td>
    </tr>
    <tr>
      <td>
        <div class="d-flex justify-content-center mt-3" style="width: 200%;">
          <button class="btn btn_light mr-1" onclick="changeArticles();"><b>儲存</b> <i
              class="fas fa-pencil-alt"></i></button>
        </div>
      </td>
    </tr>

  </tbody>
</table>
<script>
  $(function () {
    axios.get('/backstage/edit_blog_getfurther').then(({ data }) => {
      $('#data00').val(data.data[0][0]);
      $('#data01').val(data.data[0][1]);
      $('#data10').val(data.data[1][0]);
      $('#data11').val(data.data[1][1]);
      $('#data20').val(data.data[2][0]);
      $('#data21').val(data.data[2][1]);
      $('#data30').val(data.data[3][0]);
      $('#data31').val(data.data[3][1]);
      $('#data40').val(data.data[4][0]);
      $('#data41').val(data.data[4][1]);
    });
  });

  function changeArticles() {
    axios.get('/backstage/edit_blog_editfurther?data00=' + $('#data00').val() + '&data01=' + $('#data01').val() + '&data10=' + $('#data10').val() + '&data11=' + $('#data11').val() + '&data20=' + $('#data20').val() + '&data21=' + $('#data21').val() + '&data30=' + $('#data30').val() + '&data31=' + $('#data31').val() + '&data40=' + $('#data40').val() + '&data41=' + $('#data41').val())
      .then(({ data }) => {
        alert('已儲存');
      })
      .finally((data) => { location.reload(); });
  };

</script>
{% endblock main %}