<!DOCTYPE html>
<html lang="en">

<head>
    <%- include('./components/head'); %>
    <link rel="stylesheet" href="/static/css/custom.css">
</head>

<body>
    <div class="d-flex vh-100">
        <div class="col-9">
            <iframe id="preview" src="<%= site.id %>/preview" frameborder="0" class="d-block h-100 w-100"></iframe>
        </div>
        <div class="col-3 shadow flex-column p-4 d-flex" style="overflow: scroll;">
            <div class="d-flex justify-content-between align-items-center">
                <h1 class="fs-3 mb-0"><%= site.title %></h1>
                <button type="button" class="btn-close btn-close-dark" aria-label="Close" onclick="location.href= '/sites';"></button>
            </div>

            <hr>

            <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="nav-link active" id="pills-settings-tab" data-bs-toggle="pill" data-bs-target="#pills-settings" type="button" role="tab" aria-controls="pills-settings" aria-selected="true">
                        <i class="bi bi-gear-fill"></i>
                    </button>
                </li>

                <% for (const page of pages) { %>
                    <li class="nav-item" role="presentation">
                        <button class="switchPreviewPage nav-link" id="pills-<%= page.id %>-tab" data-bs-toggle="pill" data-bs-target="#pills-<%= page.id %>" type="button" role="tab" aria-controls="pills-<%= page.id %>" aria-selected="false">
                            <%= page.title %>                                
                        </button>
                    </li>
                <% } %>

                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="createPage" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">
                        <i class="bi bi-plus-lg"></i>
                    </button>
                </li>
            </ul>

            <div class="tab-content h-100" id="pills-tabContent">
                <div class="tab-pane h-100 fade show active" id="pills-settings" role="tabpanel" aria-labelledby="pills-settings-tab" tabindex="0">
                    <div class="h-100 d-flex flex-column justify-content-between">
                        <div>
                            <div class="form-floating mb-3">
                                <input type="text" class="autoSave refreshEditor form-control" id="site-<%= site.id %>-title" value="<%= site.title %>" placeholder="Title of your site">
                                <label for="siteTitleField">Site title</label>
                            </div>

                            <div class="form-floating mb-3">
                                <textarea class="autoSave form-control" id="site-<%= site.id %>-description" style="height: 150px" placeholder="Description of your site"><%= site.description %></textarea>
                                <label for="siteDescriptionTextarea">Description</label>
                            </div>

                            <div class="form-floating mb-3">
                                <input type="text" class="autoSave refreshEditor form-control" id="site-<%= site.id %>-subdomain" value="<%= site.subdomain %>" placeholder="Unique subdomain">
                                <label for="subdomainField">Subdomain</label>
                            </div>

                            <button class="btn btn-outline-dark mb-3 w-100" type="button" data-bs-toggle="offcanvas" data-bs-target="#changeThemeOffcanvas" aria-controls="changeThemeOffcanvas">
                                <i class="bi bi-palette me-1"></i>
                                Change theme
                            </button>

                            <div class="form-check form-switch mb-3">
                                <input class="autoSave refreshEditor form-check-input" type="checkbox" role="switch" id="site-<%= site.id %>-isPublished" <% if (site.isPublished) { %>checked<% } %> <% if (!site.subdomain && !site.isPublished) { %>disabled<% } %>>
                                <label class="form-check-label" for="site-<%= site.id %>-isPublished">Publish my site</label>
                                <% if (!site.subdomain) { %>
                                    <div class="form-text">Please choose your subdomain first.</div>
                                <% } else if (site.isPublished) { %>
                                    <div class="form-text">Your site is available at <a class="text-dark" href="https://<%= site.subdomain %>.<%= appDomain %>" target="_blank"><%= site.subdomain %>.<%= appDomain %></a>.</div>
                                <% } else { %>
                                    <div class="form-text">Toggle to make your site accessible at <%= site.subdomain %>.<%= appDomain %>.</div>
                                <% } %>
                            </div>                              
                        </div>
                        <div class="d-grid gap-3">
                            <% if (site.isPublished) { %>
                            <a class="btn btn-outline-dark w-100" id="viewSiteLink" href="https://<%= site.subdomain %>.<%= appDomain %>" target="_blank">
                                View site
                                <i class="bi bi-box-arrow-up-right ms-1"></i>
                            </a>
                            <% } %>
                            <button class="deleteEntity quitEditor btn btn-outline-danger w-100" id="site-<%= site.id %>-delete">
                                <i class="bi bi-trash3 me-1"></i>
                                Delete site
                            </button>
                        </div>
                    </div>
                </div>

                <% for (const page of pages) { %>
                    <div class="tab-pane h-100 fade" id="pills-<%= page.id %>" role="tabpanel" aria-labelledby="pills-<%= page.id %>-tab" tabindex="0">
                        <div class="h-100 d-flex flex-column justify-content-between">
                            <div>
                                <div class="form-floating mb-3">
                                    <input type="text" class="autoSave refreshEditor form-control" id="page-<%= page.id %>-title" value="<%= page.title %>" placeholder="Title of your page">
                                    <label for="page-<%= page.id %>-title">Page title</label>
                                </div>

                                <div class="form-floating mb-3">
                                    <textarea class="autoSave form-control" id="page-<%= page.id %>-content" style="height: 400px" placeholder="Content of your page"><%= page.content %></textarea>
                                    <label for="page-<%= page.id %>-content">Content</label>
                                </div>

                                <div class="form-floating mb-3">
                                    <input type="number" class="autoSave refreshEditor form-control" id="page-<%= page.id %>-position" value="<%= page.position %>" placeholder="Position of the page">
                                    <label for="page-<%= page.position %>-position">Position</label>
                                    <div class="form-text">Position is a number which determines order of tabs in your site's menu. Pages are sorted by this value from low to high, and the first one will also be the home page.</div>
                                </div>

                                <div class="form-floating mb-3">
                                    <input type="text" class="autoSave refreshEditor form-control" id="page-<%= page.id %>-path" value="<%= page.path %>" placeholder="Title of your page">
                                    <label for="page-<%= page.id %>-path">Path</label>
                                    <div class="form-text">This is the path which will be displayed in the address bar when viewing this page, after the domain name.</div>
                                </div>
                            </div>
                            <button class="deleteEntity btn btn-outline-danger w-100" id="page-<%= page.id %>-delete">
                                <i class="bi bi-trash3 me-1"></i>
                                Delete page
                            </button>
                        </div>
                    </div>
                <% } %>
            </div>
        </div>
    </div>
      
    <div class="offcanvas offcanvas-start" tabindex="-1" id="changeThemeOffcanvas" aria-labelledby="changeThemeOffcanvasLabel">
        <div class="offcanvas-header">
            <h2 class="offcanvas-title fs-4" id="changeThemeOffcanvasLabel">Themes</h2>
            <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
    <div class="offcanvas-body">
        <div class="d-flex flex-column gap-3">
            <% for (const theme of themes) { %>
                <div class="form-check">
                    <input class="autoSave form-check-input" type="radio" name="themeRadios" id="site-<%= site.id %>-theme-<%= theme.id %>" value="<%= theme.id %>" <% if (theme.id == site.theme) { %>checked<% } %>>
                    <label class="form-check-label" for="site-<%= site.id %>-theme-<%= theme.id %>">
                        <%= theme.name %>
                    </label>
                </div>
            <% } %>
        </div>
    </div>
    </div>

    <script>
        const previewIframe = document.getElementById('preview');
        const autoSave = document.querySelectorAll('.autoSave');
        autoSave.forEach((element) => {
            element.addEventListener('change', async event => {
                const dataArray = event.target.id.split('-');
                const data = {
                    entityType: dataArray[0],
                    entityId: dataArray[1],
                    property: dataArray[2],
                    value: event.target.value
                };

                if (event.target.type == 'checkbox') {
                    data.value = event.target.checked;
                }

                await fetch('/sites/<%= site.id %>/update', {
                    method: 'PATCH',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(data)
                });
                if (event.target.classList.contains('refreshEditor')) {
                    window.location.reload();
                } else {
                    previewIframe.contentWindow.location.reload();
                }
            });
        });

        const createPage = document.getElementById('createPage');
        createPage.addEventListener('click', async event => {
            await fetch('/sites/<%= site.id %>/create-page', {
                method: 'POST'
            });
            window.location.reload();
        });

        const deleteEntity = document.getElementsByClassName('deleteEntity');
        for (const element of deleteEntity) {
            element.addEventListener('click', async event => {
                const dataArray = event.target.id.split('-');
                const data = {
                    entityType: dataArray[0],
                    entityId: dataArray[1]
                };
                await fetch('/sites/<%= site.id %>/delete', {
                    method: 'DELETE',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(data)
                });
                if (element.classList.contains('quitEditor')) {
                    window.location.href = '/sites';
                } else {
                    window.location = '/sites/<%= site.id %>';
                }
            });
        }

        let previewPageNumber = 0;
        const switchPreviewPage = document.getElementsByClassName('switchPreviewPage');
        for (const element of switchPreviewPage) {
            element.addEventListener('click', event => {
                const switchPreviewPageArray = Array.from(switchPreviewPage);
                previewPageNumber = switchPreviewPageArray.indexOf(element);
                previewIframe.src = '/sites/<%= site.id %>/' + previewPageNumber + '/preview';
            });
        }
    </script>

    <%- include('./components/foot'); %>
</body>

</html>