<!DOCTYPE html>
<html lang="en">
<head>
    <title>RenewCMS | Articles</title>
    {{.Head}}

    <style>
        .btn-outline-info:hover > *,
        .btn-outline-danger:hover > * {
            fill: #fff !important;
            transition: fill ease-in-out 50ms;
        }
    </style>
</head>
<body class="text-dark">
{{.Navbar}}
<div class="container mt-3 text-black-50">
    <h1>Articles</h1>
    <p>List of your articles</p>
    <table class="table table-hover">
        <thead>
        <tr>
            <th scope="col">Name</th>
            <th scope="col">Creation Date</th>
            <th scope="col">Edition Date</th>
            <th scope="col">Status</th>
            <th scope="col">Actions</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td colspan="5" class="text-center">
                <form action="article/create" method="get">
                    <button class="btn btn-sm btn-link w-100 h-100" type="submit">Create a new article...</button>
                </form>
            </td>
        </tr>
        {{ range $article := .Articles }}
        <tr>
            <td>{{ $article.Title }}</td>
            <td class="date">{{ $article.CreatedAt }}</td>
            <td class="date">{{ $article.UpdatedAt }}</td>
            <td>{{ if $article.IsOnline }}🟢 Online{{ else }}🟠 Offline{{ end }}</td>
            <td>
                <a href="/article/{{ $article.ID }}/edit" class="btn btn-outline-primary btn-sm">
                    <svg width="12px" height="12px" fill="currentColor">
                        <use xlink:href="/static/bootstrap-icons.svg#pen"/>
                    </svg>
                </a>
                {{ if $article.IsOnline }}
                <a href="/article/{{ $article.ID }}/unpublish" class="btn btn-outline-info btn-sm">
                    <svg width="12px" height="12px" fill="currentColor">
                        <use xlink:href="/static/bootstrap-icons.svg#eye-slash"/>
                    </svg>
                </a>
                {{ else }}
                <a href="/article/{{ $article.ID }}/publish" class="btn btn-outline-info btn-sm">
                    <svg width="12px" height="12px" fill="currentColor">
                        <use xlink:href="/static/bootstrap-icons.svg#eye"/>
                    </svg>
                </a>
                {{ end }}
                <a href="/article/{{ $article.Title }}/delete" class="btn btn-outline-danger btn-sm" data-bs-toggle="modal"
                   data-bs-target="#{{ $article.ID }}">
                    <svg width=" 12px" height="12px" fill="currentColor">
                        <use xlink:href="/static/bootstrap-icons.svg#trash"/>
                    </svg>
                </a>
                <div class="modal fade" id="{{ $article.ID }}" tabindex="-1" aria-labelledby="{{ $article.ID }}Label"
                     aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h1 class="modal-title fs-5" id="{{ $article.ID }}Label">Delete post</h1>
                                <button type="button" class="btn-close" data-bs-dismiss="modal"
                                        aria-label="Close"></button>
                            </div>
                            <div class="modal-body">
                                <p>You are about to delete the post <b>« {{ $article.Title }} »</b>, this is definitive,
                                    are you sure?</p>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel
                                </button>
                                <a href="/article/{{$article.ID}}/delete" class="btn btn-danger">Delete</a>
                            </div>
                        </div>
                    </div>
                </div>
            </td>
        </tr>
        {{ end }}
        </tbody>
    </table>

</div>

<script>
    const datesElements = document.querySelectorAll("td.date")
    datesElements.forEach(date => {
        date.innerText = new Date(date.innerText).toLocaleDateString(undefined, {
            year: "2-digit",
            month: "2-digit",
            day: "2-digit",
            hour: "2-digit",
            minute: "2-digit"
        })
    })
</script>

</body>
</html>
