{% 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>
<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">
                    <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[0][0]);
            $('#data01').val(data[0][1]);
            $('#data10').val(data[1][0]);
            $('#data11').val(data[1][1]);
            $('#data20').val(data[2][0]);
            $('#data21').val(data[2][1]);
            $('#data30').val(data[3][0]);
            $('#data31').val(data[3][1]);
            $('#data40').val(data[4][0]);
            $('#data41').val(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 %}