<script>
    let { pages = [], adminPath = 'loom' } = $props();

    function deletePage(id) {
        if (confirm('Are you sure you want to delete this page?')) {
            const form = document.createElement('form');
            form.method = 'POST';
            const baseUrl = window.location.origin.endsWith('/') ? window.location.origin : `${window.location.origin}/`;
            const path = adminPath.startsWith('/') ? adminPath.substring(1) : adminPath;
            const url = `${baseUrl}${path}/pages/${id}`;
            form.action = url;

            const methodInput = document.createElement('input');
            methodInput.type = 'hidden';
            methodInput.name = '_method';
            methodInput.value = 'DELETE';

            const tokenInput = document.createElement('input');
            tokenInput.type = 'hidden';
            tokenInput.name = '_token';
            tokenInput.value = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

            form.appendChild(methodInput);
            form.appendChild(tokenInput);
            document.body.appendChild(form);
            form.submit();
        }
    }
</script>

<div class="ui container">
    <div class="ui grid">
        <div class="sixteen wide column">
            <h1 class="ui header">
                <i class="file icon"></i>
                <div class="content">
                    Pages
                    <div class="sub header">Manage your site's static and dynamic pages</div>
                </div>
            </h1>
        </div>

        <div class="sixteen wide column">
            <div class="ui secondary menu">
                <div class="right menu">
                    <a href="{window.location.origin.endsWith('/') ? window.location.origin : window.location.origin + '/'}{adminPath.startsWith('/') ? adminPath.substring(1) : adminPath}/pages/create" class="ui primary button">
                        <i class="plus icon"></i> New Page
                    </a>
                </div>
            </div>

            {#if pages.length === 0}
                <div class="ui placeholder segment">
                    <div class="ui icon header">
                        <i class="file outline icon"></i>
                        No pages have been created yet.
                    </div>
                    <a href="{window.location.origin.endsWith('/') ? window.location.origin : window.location.origin + '/'}{adminPath.startsWith('/') ? adminPath.substring(1) : adminPath}/pages/create" class="ui primary button">Create your first page</a>
                </div>
            {:else}
                <table class="ui celled table">
                    <thead>
                        <tr>
                            <th>Title</th>
                            <th>Slug</th>
                            <th>Author</th>
                            <th>Status</th>
                            <th>Last Updated</th>
                            <th class="collapsing">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        {#each pages as page}
                            <tr>
                                <td>
                                    <strong>{page.title}</strong>
                                </td>
                                <td><code>/{page.slug}</code></td>
                                <td>{page.author || 'Unknown'}</td>
                                <td>
                                    {#if page.is_published}
                                        <div class="ui green label">Published</div>
                                    {:else}
                                        <div class="ui yellow label">Draft</div>
                                    {/if}
                                </td>
                                <td>{page.updated_at}</td>
                                <td>
                                    <div class="ui small basic icon buttons">
                                        <a href="{window.location.origin.endsWith('/') ? window.location.origin : window.location.origin + '/'}{adminPath.startsWith('/') ? adminPath.substring(1) : adminPath}/pages/{page.id}/edit" class="ui button" title="Edit">
                                            <i class="edit icon"></i>
                                        </a>
                                        <button class="ui button" title="Delete" onclick={() => deletePage(page.id)}>
                                            <i class="trash icon"></i>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                        {/each}
                    </tbody>
                </table>
            {/if}
        </div>
    </div>
</div>
