@reldens/cms 0.4.0 → 0.6.0

package/admin/reldens-admin-client.js

@@ -0,0 +1,272 @@
+/**
+ *
+ * Reldens - Admin Client JS
+ *
+ */
+
+window.addEventListener('DOMContentLoaded', () => {
+
+    // helpers:
+    let location = window.location;
+    let currentPath = location.pathname;
+    let queryString = location.search;
+    let urlParams = new URLSearchParams(queryString);
+
+    function getCookie(name)
+    {
+        let value = `; ${document.cookie}`;
+        let parts = value.split(`; ${name}=`);
+        if(2 === parts.length){
+            return parts.pop().split(';').shift()
+        }
+    }
+
+    function deleteCookie(name)
+    {
+        document.cookie = name + '=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT;';
+    }
+
+    function escapeHTML(str)
+    {
+        return str.replace(/&/g, "&")
+            .replace(/</g, "&lt;")
+            .replace(/>/g, "&gt;")
+            .replace(/"/g, "&quot;")
+            .replace(/'/g, "&#039;");
+    }
+
+    function cloneElement(element)
+    {
+        if(element instanceof HTMLCanvasElement){
+            let clonedCanvas = document.createElement('canvas');
+            clonedCanvas.width = element.width;
+            clonedCanvas.height = element.height;
+            let ctx = clonedCanvas.getContext('2d');
+            ctx.drawImage(element, 0, 0);
+            return clonedCanvas
+        }
+        return element.cloneNode(true);
+    }
+
+    // error codes messages map:
+    let errorMessages = {
+        saveBadPatchData: 'Bad patch data on update.',
+        saveEntityStorageError: 'Entity storage error.',
+        saveEntityError: 'Entity could not be saved.',
+        shutdownError: 'Server could not be shutdown, missing "shutdownTime".',
+        errorView: 'Could not render view page.',
+        errorEdit: 'Could not render edit page.',
+        errorId: 'Missing entity ID on POST.'
+    };
+
+    // activate expand/collapse elements
+    let expandCollapseButtons = document.querySelectorAll('[data-expand-collapse]');
+    if(expandCollapseButtons){
+        for(let expandCollapseButton of expandCollapseButtons){
+            expandCollapseButton.addEventListener('click', (event) => {
+                let expandCollapseElement = document.querySelector(event.currentTarget.dataset.expandCollapse);
+                if(expandCollapseElement){
+                    expandCollapseElement.classList.toggle('hidden');
+                }
+            });
+        }
+    }
+
+    // activate modals on click
+    let modalElements = document.querySelectorAll('[data-toggle="modal"]');
+    if(modalElements){
+        for(let modalElement of modalElements){
+            modalElement.addEventListener('click', () => {
+                let overlay = document.createElement('div');
+                overlay.classList.add('modal-overlay');
+                let modal = document.createElement('div');
+                modal.classList.add('modal');
+                modal.classList.add('clickable');
+                let clonedElement = cloneElement(modalElement);
+                clonedElement.classList.add('clickable');
+                modal.appendChild(clonedElement);
+                overlay.appendChild(modal);
+                document.body.appendChild(overlay);
+                clonedElement.addEventListener('click', () => {
+                    document.body.removeChild(overlay);
+                });
+                modal.addEventListener('click', (e) => {
+                    if(e.target === modal){
+                        document.body.removeChild(modal.parentNode);
+                    }
+                });
+                overlay.addEventListener('click', (e) => {
+                    if(e.target === overlay) {
+                        document.body.removeChild(overlay);
+                    }
+                });
+            });
+        }
+    }
+
+    // login errors:
+    if('true' === urlParams.get('login-error')){
+        let loginErrorBox = document.querySelector('form.login-form .response-error');
+        if(loginErrorBox){
+            loginErrorBox.innerHTML = 'Login error, please try again.';
+        }
+    }
+
+    // forms behavior:
+    let forms = document.querySelectorAll('form');
+    if(forms){
+        for(let form of forms){
+            form.addEventListener('submit', (event) => {
+                let submitButton = document.querySelector('input[type="submit"]');
+                submitButton.disabled = true;
+                let loadingImage = document.querySelector('.submit-container .loading');
+                if(loadingImage){
+                    loadingImage.classList.remove('hidden');
+                }
+                if(form.classList.contains('form-delete') || form.classList.contains('confirmation-required')){
+                    if(!confirm('Are you sure?')){
+                        event.preventDefault();
+                        submitButton.disabled = false;
+                        loadingImage.classList.add('hidden');
+                    }
+                }
+            });
+        }
+    }
+
+    // sidebar headers click behavior:
+    let sideBarHeaders = document.querySelectorAll('.with-sub-items h3');
+    if(sideBarHeaders){
+        for(let header of sideBarHeaders){
+            header.addEventListener('click', (event) => {
+                event.currentTarget.parentNode.classList.toggle('active');
+            });
+        }
+    }
+
+    // expand menu on load:
+    let subItemContainers = document.querySelectorAll('.with-sub-items');
+    if(subItemContainers){
+        let done = false;
+        for(let container of subItemContainers){
+            let links = container.querySelectorAll('.side-bar-item a');
+            for(let link of links){
+                let linkWithoutHost = link.href.replace(location.host, '').replace(location.protocol+'//', '');
+                if(currentPath === linkWithoutHost || 0 === currentPath.indexOf(linkWithoutHost+'/')){
+                    link.parentNode.classList.add('active');
+                    container.classList.add('active');
+                    done = true;
+                    break;
+                }
+            }
+            if(done){
+                break;
+            }
+        }
+    }
+
+    // filters toggle visibility:
+    let filtersToggle = document.querySelector('.filters-toggle');
+    let filtersToggleContent = document.querySelector('.filters-toggle-content');
+    if(filtersToggle && filtersToggleContent){
+        filtersToggle.addEventListener('click', () => {
+            filtersToggleContent.classList.toggle('hidden');
+        });
+        let allFilters = document.querySelectorAll('.filters-toggle-content .filter input');
+        let activeFilters = Array.from(allFilters).filter(input => '' !== input.value);
+        if(0 < activeFilters.length){
+            filtersToggleContent.classList.remove('hidden');
+            let paginationLinks = document.querySelectorAll('.pagination a');
+            let filtersForm = document.querySelector('#filter-form');
+            if(paginationLinks && filtersForm){
+                for(let link of paginationLinks){
+                    link.addEventListener('click', (event) => {
+                        event.stopPropagation();
+                        event.preventDefault();
+                        filtersForm.action = link.href;
+                        filtersForm.submit();
+                        return false;
+                    })
+                }
+            }
+        }
+    }
+
+    // list "select all" option:
+    let listSelect = document.querySelector('.list-select');
+    if(listSelect){
+        listSelect.addEventListener('click', (event) => {
+            let checkboxes = document.querySelectorAll('.ids-checkbox');
+            for(let checkbox of checkboxes){
+                checkbox.checked = 1 === Number(event.currentTarget.dataset.checked);
+            }
+            event.currentTarget.dataset.checked = 1 === Number(event.currentTarget.dataset.checked) ? 0 : 1;
+        });
+    }
+
+    // list delete selection:
+    let listDeleteSelection = document.querySelector('.list-delete-selection');
+    let deleteSelectionForm = document.getElementById('delete-selection-form');
+    let hiddenInput = document.querySelector('.hidden-ids-input');
+    if(listDeleteSelection && deleteSelectionForm && hiddenInput){
+        listDeleteSelection.addEventListener('click', () => {
+            if(!confirm('Are you sure?')){
+                return;
+            }
+            let checkboxes = document.querySelectorAll('.ids-checkbox');
+            let ids = [];
+            for(let checkbox of checkboxes){
+                if(checkbox.checked){
+                    ids.push(checkbox.value);
+                }
+            }
+            hiddenInput.value = ids.join(',');
+            deleteSelectionForm.submit();
+        });
+    }
+
+    // display notifications from query params:
+    let notificationElement = document.querySelector('.notification');
+    if(notificationElement){
+        let closeNotificationElement = document.querySelector('.notification .close');
+        closeNotificationElement?.addEventListener('click', () => {
+            notificationElement.classList.remove('success', 'error');
+        });
+        let queryParams = new URLSearchParams(location.search);
+        let result = queryParams.get('result');
+        if(!result){
+            result = getCookie('result');
+        }
+        let notificationMessageElement = document.querySelector('.notification .message');
+        if(result && notificationMessageElement){
+            let notificationClass = 'success' === result ? 'success' : 'error';
+            notificationMessageElement.innerHTML = '';
+            notificationElement.classList.add(notificationClass);
+            notificationMessageElement.innerHTML = 'success' === result
+                ? 'Success!'
+                : 'There was an error: '+escapeHTML(errorMessages[result] || result);
+            deleteCookie('result');
+        }
+    }
+
+    // shutdown timer:
+    let shuttingDownTimeElement = document.querySelector('.shutting-down .shutting-down-time');
+    if(shuttingDownTimeElement){
+        let shuttingDownTime = shuttingDownTimeElement.getAttribute('data-shutting-down-time');
+        if(shuttingDownTime){
+            shuttingDownTimeElement.innerHTML = escapeHTML(String(shuttingDownTime))+'s';
+            shuttingDownTime = Number(shuttingDownTime);
+            let shuttingDownTimer = setInterval(
+                () => {
+                    shuttingDownTimeElement.innerHTML = escapeHTML(String(shuttingDownTime))+'s';
+                    shuttingDownTime--;
+                    if(0 === Number(shuttingDownTime)){
+                        clearInterval(shuttingDownTimer);
+                    }
+                },
+                1000
+            );
+        }
+    }
+
+});

package/admin/templates/dashboard.html

@@ -0,0 +1 @@
+Welcome to the Reldens Administration Panel!

package/admin/templates/default-copyright.html

@@ -0,0 +1,5 @@
+<div class="copyright">
+    <a href="https://www.dwdeveloper.com/" target="_blank">
+        by D<span class="text-black text-lowercase">w</span><span class="text-capitalize">Developer</span>
+    </a>
+</div>

package/admin/templates/edit.html

@@ -0,0 +1,25 @@
+<div class="entity-edit {{&entityName}}-edit">
+    <h2>{{&templateTitle}}</h2>
+    <form name="edit-form" id="edit-form" action="{{&entitySaveRoute}}" method="post"{{&multipartFormData}}>
+        <input type="hidden" name="{{&idProperty}}" value="{{&idValue}}"/>
+        <div class="edit-field">
+            <span class="field-name">{{&idPropertyLabel}}</span>
+            <span class="field-value">
+                <input type="text" name="disabled-{{&idProperty}}" value="{{&idValue}}" disabled="disabled"/>
+            </span>
+        </div>
+        {{#editFields}}
+        <div class="edit-field">
+            <span class="field-name">{{&name}}</span>
+            <span class="field-value">{{&value}}</span>
+        </div>
+        {{/editFields}}
+        <div class="actions">
+            <input class="button button-primary button-submit" type="submit" value="Save"/>
+            <a class="button button-secondary button-back" href="{{&entityViewRoute}}">Cancel</a>
+        </div>
+    </form>
+    <div class="extra-actions">
+        {{&extraContent}}
+    </div>
+</div>

package/admin/templates/fields/edit/button.html

@@ -0,0 +1,3 @@
+<button name="{{&fieldName}}" id="{{&fieldName}}"{{&fieldDisabled}}>
+    {{&fieldValue}}
+</button>

package/admin/templates/fields/edit/checkbox.html

@@ -0,0 +1 @@
+<input type="checkbox" name="{{&fieldName}}" value="1"{{&fieldValue}}{{&fieldDisabled}}/>

package/admin/templates/fields/edit/file.html

@@ -0,0 +1,2 @@
+<p>{{&fieldValue}}</p>
+<input type="file" name="{{&fieldName}}" id="{{&fieldName}}"{{&required}}{{&fieldDisabled}}{{&multiple}}/>

package/admin/templates/fields/edit/radio.html

@@ -0,0 +1 @@
+<input type="radio" name="{{&fieldName}}" value="{{&fieldValue}}"{{checked}}{{&fieldDisabled}}/>

package/admin/templates/fields/edit/select.html

@@ -0,0 +1,5 @@
+<select name="{{&fieldName}}" id="{{&fieldName}}"{{&required}}{{&fieldDisabled}}>
+    {{#fieldValue}}
+    <option value="{{&value}}"{{&selected}}>{{&label}}</option>
+    {{/fieldValue}}
+</select>

package/admin/templates/fields/edit/text.html

@@ -0,0 +1 @@
+<input type="text" name="{{&fieldName}}" id="{{&fieldName}}" value="{{fieldValue}}"{{&required}}{{&fieldDisabled}}/>

package/admin/templates/fields/edit/textarea.html

@@ -0,0 +1 @@
+<textarea name="{{&fieldName}}" id="{{&fieldName}}"{{&required}}{{&fieldDisabled}}>{{&fieldValue}}</textarea>

package/admin/templates/fields/view/boolean.html

@@ -0,0 +1 @@
+{{&fieldValue}}

package/admin/templates/fields/view/image.html

@@ -0,0 +1,4 @@
+<a href="{{&fieldValue}}"{{&target}}>
+    <p>{{&fieldValue}}</p>
+    <img src="{{&fieldValue}}" alt="{{&fieldValue}}"/>
+</a>

package/admin/templates/fields/view/images.html

@@ -0,0 +1,7 @@
+{{#fieldValue}}
+<a href="{{&fieldValuePart}}"{{&target}}>
+    <p>{{&fieldOriginalValuePart}}</p>
+    <img src="{{&fieldValuePart}}" alt="{{&fieldValuePart}}"/>
+</a>
+<br/>
+{{/fieldValue}}

package/admin/templates/fields/view/link.html

@@ -0,0 +1 @@
+<a href="{{&fieldValue}}"{{&target}}>{{&fieldOriginalValue}}</a>

package/admin/templates/fields/view/links.html

@@ -0,0 +1,6 @@
+{{#fieldValue}}
+<a href="{{&fieldValuePart}}"{{&target}}>
+    {{&fieldOriginalValuePart}}
+</a>
+<br/>
+{{/fieldValue}}

package/admin/templates/fields/view/text.html

@@ -0,0 +1 @@
+{{&fieldValue}}

package/admin/templates/layout.html

@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>{{&brandingCompanyName}}</title>
+    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Play:300,300i,400,400i,500,500i,600,600i,700,700i" rel="stylesheet"/>
+    <link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/4.6.0/firebase-ui-auth.css"/>
+    <link rel="apple-touch-icon" sizes="180x180" href="/assets/favicons/apple-touch-icon.png"/>
+    <link rel="icon" type="image/png" sizes="32x32" href="/assets/favicons/favicon-32x32.png"/>
+    <link rel="icon" type="image/png" sizes="16x16" href="/assets/favicons/favicon-16x16.png"/>
+    <link rel="manifest" href="/site.webmanifest"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
+    <link rel="stylesheet" type="text/css" href="{{stylesFilePath}}"/>
+    <script type="module" src="{{scriptsFilePath}}"></script>
+</head>
+<body class="reldens-admin-panel">
+<div class="wrapper">
+    <div class="header">
+        <h1 class="title">
+            <a href="{{rootPath}}">{{&brandingCompanyName}}</a>
+        </h1>
+    </div>
+    <div class="content">
+        <div class="notification">
+            <span class="close">&times;</span>
+            <span class="message"></span>
+        </div>
+        {{&sideBar}}
+        <div class="main-content">
+            {{&pageContent}}
+        </div>
+    </div>
+    <div class="footer">
+        {{&copyRight}}
+    </div>
+</div>
+</body>
+</html>

package/admin/templates/list-content.html

@@ -0,0 +1,70 @@
+<tr class="row row-header">
+    <th class="field field-actions">
+        <div class="field-actions-container">
+            <button class="button button-primary list-select" data-checked="1">Select All/None</button>
+            <form name="delete-selection-form" id="delete-selection-form" action="{{&deletePath}}" method="post">
+                <input type="hidden" name="ids" class="hidden-ids-input"/>
+                <button class="button button-danger list-delete-selection">Delete Selection</button>
+            </form>
+        </div>
+    </th>
+    {{#fieldsHeaders}}
+    <th class="field field-{{&name}}">
+        <span>{{&value}}</span>
+    </th>
+    {{/fieldsHeaders}}
+    <th class="field field-edit">
+        <span>Edit</span>
+    </th>
+    <th class="field field-delete">
+        <span>Delete</span>
+    </th>
+</tr>
+{{#rows}}
+<tr class="row">
+    <td class="field field-actions">
+        <div class="field-actions-container">
+            <input class="ids-checkbox" type="checkbox" name="idsSelection[]" value="{{&id}}"/>
+        </div>
+    </td>
+    {{#fields}}
+    <td class="field field-{{&name}}">
+        <a href="{{&viewLink}}">
+            <span>{{&value}}</span>
+        </a>
+    </td>
+    {{/fields}}
+    <td class="field field-edit">
+        <a href="{{&editLink}}">
+            <span>
+                <svg
+                    class="feather feather-edit"
+                    fill="none"
+                    height="24"
+                    stroke="currentColor"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    viewBox="0 0 24 24"
+                    width="24"
+                    xmlns="http://www.w3.org/2000/svg">
+                    <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/>
+                    <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>
+                </svg>
+            </span>
+        </a>
+    </td>
+    <td class="field field-delete">
+        <form class="form-delete" name="delete-form-{{&id}}" id="delete-form-{{&id}}" action="{{&deleteLink}}" method="post">
+            <span>
+                <input type="hidden" name="ids[]" value="{{&id}}"/>
+                <button class="button-list-delete" type="submit">
+                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                        <path d="M10,18a1,1,0,0,0,1-1V11a1,1,0,0,0-2,0v6A1,1,0,0,0,10,18ZM20,6H16V5a3,3,0,0,0-3-3H11A3,3,0,0,0,8,5V6H4A1,1,0,0,0,4,8H5V19a3,3,0,0,0,3,3h8a3,3,0,0,0,3-3V8h1a1,1,0,0,0,0-2ZM10,5a1,1,0,0,1,1-1h2a1,1,0,0,1,1,1V6H10Zm7,14a1,1,0,0,1-1,1H8a1,1,0,0,1-1-1V8H17Zm-3-1a1,1,0,0,0,1-1V11a1,1,0,0,0-2,0v6A1,1,0,0,0,14,18Z" fill="#6563ff"/>
+                    </svg>
+                </button>
+            </span>
+        </form>
+    </td>
+</tr>
+{{/rows}}

package/admin/templates/list.html

@@ -0,0 +1,35 @@
+<div class="entity-list {{&entityName}}-list">
+    <h2 class="list-title">{{&templateTitle}}</h2>
+    <div class="actions">
+        <a class="button button-primary" href="{{&entityEditRoute}}">Create New</a>
+    </div>
+    <div class="extra-actions">
+        {{&extraContent}}
+    </div>
+    <div class="sub-content filters">
+        <form class="sub-content-form filter-form" name="filter-form" id="filter-form" action="{{&entityListRoute}}" method="post">
+            <h4 class="filters-toggle">
+                <img src="/assets/admin/filters.png" alt="Filters"/>
+                <span>Filters</span>
+            </h4>
+            <div class="filters-toggle-content hidden">
+                {{#filters}}
+                <div class="sub-content-box filter">
+                    <label for="filter-{{&propertyKey}}">{{&name}}</label>
+                    <input type="text" id="filter-{{&propertyKey}}" name="filters[{{&propertyKey}}]"{{&value}}/>
+                </div>
+                {{/filters}}
+                <div class="actions">
+                    <input class="button button-primary button-filter" type="submit" value="Filter"/>
+                    <a class="button button-secondary button-clear-filter" href="{{&entityListRoute}}">Clear Filters</a>
+                </div>
+            </div>
+        </form>
+    </div>
+    <table class="list">
+        {{&list}}
+    </table>
+    <div class="pagination">
+        {{&pagination}}
+    </div>
+</div>

package/admin/templates/login.html

@@ -0,0 +1,19 @@
+<div class="forms-container">
+    <div class="row">
+        <form name="login-form" id="login-form" class="login-form" action="#" method="post">
+            <h3 class="form-title">Login</h3>
+            <div class="input-box login-email">
+                <label for="email">E-mail</label>
+                <input type="text" name="email" id="email" class="required" required autocomplete="on"/>
+            </div>
+            <div class="input-box login-password">
+                <label for="password">Password</label>
+                <input type="password" name="password" id="password" class="required" required autocomplete="off"/>
+            </div>
+            <div class="input-box submit-container login-submit">
+                <input class="button button-primary button-login" type="submit" value="Submit"/>
+            </div>
+            <div class="input-box response-error"></div>
+        </form>
+    </div>
+</div>

package/admin/templates/management.html

@@ -0,0 +1,22 @@
+<h2>Server Management</h2>
+<div class="sub-content">
+    <div class="sub-content-box">
+        <h3>Server Maintenance</h3>
+        <form class="sub-content-form management-form confirmation-required" name="management-form" id="management-form" action="{{&actionPath}}" method="post">
+            <div>
+                <label for="shutdown-time">
+                    <span>Shutdown server with user notifications in seconds:</span>
+                    <input type="number" name="shutdown-time" id="shutdown-time" value="{{&shutdownTime}}"/>
+                </label>
+                <p class="alert">IMPORTANT: this will take down the administration panel as well, and you will be logged out.</p>
+                <div class="shutting-down">
+                    <span class="shutting-down-label">{{&shuttingDownLabel}}</span>
+                    <span class="shutting-down-time" data-shutting-down-time="{{&shuttingDownTime}}">
+                        {{&shuttingDownTime}}
+                    </span>
+                </div>
+            </div>
+            <input type="submit" class="button button-{{&submitType}} button-management" value="{{&submitLabel}}"/>
+        </form>
+    </div>
+</div>

package/admin/templates/maps-wizard-maps-selection.html

@@ -0,0 +1,85 @@
+<h2>Maps Wizard</h2>
+<div class="sub-content maps-wizard">
+    <div class="sub-content-box">
+        <form class="sub-content-form maps-wizard-form confirmation-required"
+            name="maps-wizard-form"
+            id="maps-wizard-form"
+            action="{{&actionPath}}"
+            method="post"
+            enctype="multipart/form-data">
+            <input type="hidden" name="mainAction" id="mainAction" value="import"/>
+            <input type="hidden" name="generatedMapsHandler" id="generatedMapsHandler" value="{{&generatedMapsHandler}}"/>
+            <input type="hidden" name="importAssociationsForChangePoints" id="importAssociationsForChangePoints" value="{{&importAssociationsForChangePoints}}"/>
+            <input type="hidden" name="importAssociationsRecursively" id="importAssociationsRecursively" value="{{&importAssociationsRecursively}}"/>
+            <input type="hidden" name="automaticallyExtrudeMaps" id="automaticallyExtrudeMaps" value="{{&automaticallyExtrudeMaps}}"/>
+            <input type="hidden" name="verifyTilesetImage" id="verifyTilesetImage" value="{{&verifyTilesetImage}}"/>
+            <input type="hidden" name="handlerParams" id="handlerParams" value="{{handlerParams}}"/>
+            <div class="main-action-container maps-selection">
+                <h3>Select the maps to be imported</h3>
+                <p>Notes:<p>
+                <p>
+                    - The Game Server requires a reboot in order to make the maps available on the game.<br/>
+                    - If you refresh the page you will get a new set of random maps generated.<br/>
+                    - Generated sub-maps will be automatically imported, if you don't want to import those you can download all the related maps (the main map and the sub-map) and edit change them to your needs.<br/>
+                </p>
+                <ul class="wizard-options-container">
+                {{#maps}}
+                    <li class="wizard-map-option-container">
+                        <div class="selector-box">
+                            <input class="map-wizard-option" type="checkbox" name="selectedMaps[]" id="maps-wizard-map-option-{{&key}}" value="{{&key}}"/>
+                            <input type="hidden" name="map-title-{{&key}}" id="map-title-{{&key}}" value="{{&key}}"/>
+                            <label class="main-option" for="maps-wizard-map-option-{{&key}}">
+                                {{&key}}
+                            </label>
+                            <p>Downloads:</p>
+                            <p>
+                                - <a href="{{&mapJson}}" target="_blank">{{&mapJson}}</a><br/>
+                                - <a href="{{&mapImage}}" target="_blank">{{&mapImage}}</a>
+                            </p>
+                        </div>
+                        <canvas
+                            class="mapCanvas"
+                            data-toggle="modal"
+                            width="{{&mapWidth}}"
+                            height="{{&mapHeight}}"
+                            data-tile-width="{{&tileWidth}}"
+                            data-tile-height="{{&tileHeight}}"
+                            data-image-key="{{&mapImage}}"
+                            data-map-json="{{&mapJson}}">
+                        </canvas>
+                        {{#hasSubMaps}}
+                            <div class="sub-maps">
+                                <p class="sub-map-option-description clickable" data-expand-collapse=".sub-maps-container-{{&key}}">
+                                    <img class="icon-sm" src="/assets/admin/filters.png" alt="Associated maps"/>
+                                    <span>Associated maps generated</span>
+                                </p>
+                                <div class="sub-maps-container sub-maps-container-{{&key}} hidden">
+                                    {{#subMaps}}
+                                        <p>{{&key}}</p>
+                                        <p>Downloads:</p>
+                                        <p>
+                                            - <a href="{{&mapJson}}" target="_blank">{{&mapJson}}</a><br/>
+                                            - <a href="{{&mapImage}}" target="_blank">{{&mapImage}}</a>
+                                        </p>
+                                        <canvas
+                                            class="mapCanvas"
+                                            data-toggle="modal"
+                                            width="{{&mapWidth}}"
+                                            height="{{&mapHeight}}"
+                                            data-tile-width="{{&tileWidth}}"
+                                            data-tile-height="{{&tileHeight}}"
+                                            data-image-key="{{&mapImage}}"
+                                            data-map-json="{{&mapJson}}">
+                                        </canvas>
+                                    {{/subMaps}}
+                                </div>
+                            </div>
+                        {{/hasSubMaps}}
+                    </li>
+                {{/maps}}
+                </ul>
+            </div>
+            <input type="submit" class="button button-primary button-maps-wizard" value="Import Selected Maps"/>
+        </form>
+    </div>
+</div>