{{template "header" .}}
<div class="container-fluid flex justify-content">
    <div class="main">
        <h3 style="margin-top: 20px;margin-bottom: 10px;">短地址列表 <a class="btn btn-primary"
                href="/create-short-url">添加</a></h3>
        <table class="my_table" style="display: block;">
            <tr>
                <th width="600px">原地址</th>
                <th width="320px">短地址</th>
                <th width="80px">是否有效</th>
                <th width="80px">删除</th>
            </tr>
            {{range .}}
            <tr>
                <td width="600px">{{.OriginUrl}}</td>
                <td width="320px"><a target="_blank" href="{{genShortUrl .ShortUrl}}">{{genShortUrl .ShortUrl}}</a></td>
                <td width="80px">
                    {{if eq .Status 0}}
                    <code>YES</code>
                    {{else}}
                    <code>NO</code>
                    {{end}}
                </td>
                <td width="80px">
                    {{if eq .Status 0}}
                    <button data-short-url="{{.ShortUrl}}" class="btn btn-danger deleteShortUrl">删除</button>
                    {{end}}
                </td>
            </tr>
            {{end}}
        </table>
        {{ csrfField }}
    </div>
</div>

{{define "css"}}
<style>
    .my_table {
        display: block;
        max-width: 1280px;
    }

    .my_table tr {
        display: inline-block;
        width: 100%;
        border: 1px solid #eee;
        border-collapse: collapse;
    }

    .my_table tr td {
        display: inline-block;
        word-wrap: break-word;
        padding: 2px 5px;
    }
</style>
{{end}}
{{define "js"}}
<script>
    $('.deleteShortUrl').click(function () {
        let csrfToken = $('input[name="csrf_token"]').val()
        let u = $(this).attr('data-short-url')
        $.ajax({
            url: '/delete-short-url/' + u,
            type: 'POST',
            cache: false,
            processData: false,
            contentType: false,
            headers: {
                "X-CSRF-Token": csrfToken
            },
            success: function (res) {
                if (res.success) {
                    alert('删除成功');
                    window.location.reload();
                } else {
                    alert('删除失败');
                }
            }
        })
    });
</script>
{{end}}
{{template "footer" .}}