<%- include('_header'); -%>

<div class="columns">
    <div class="column is-3 is-hidden-mobile">
        <%- include('_menu-admin'); -%>
    </div>
    <div class="column">
        <nav class="breadcrumb">
          <ul>
            <li><a href="<%= urlPrefix %>/dashboard">Home</a></li>
            <li>
                <a href="#">
        
                    <span class="icon is-small"><i class="fas fa-cog" aria-hidden="true"></i></span>
                    <span>Administrator Tools</span>
                </a>
            </li>
            <li class="is-active">
                <a href="#" aria-current="page">
                    <%= configFunctions.getProperty("aliases.occupancy") %> Type Management
                </a>
            </li>
          </ul>
        </nav>
        
        <div class="level is-mobile">
            <div class="level-left">
                <div class="level-item">
                    <h1 class="title is-1">
                        <%= configFunctions.getProperty("aliases.occupancy") %> Type Management
                    </h1>
                </div>
            </div>
            <div class="level-right">
                <div class="level-item">
                    <button class="button is-success" id="button--addOccupancyType" type="button" accesskey="n">
                        <span class="icon is-small"><i class="fas fa-plus" aria-hidden="true"></i></span>
                        <span>Add <%= configFunctions.getProperty("aliases.occupancy") %> Type</span>
                    </button>
                </div>
            </div>
        </div>
        
        <div class="tabs is-boxed" role="tablist">
            <ul role="presentation">
                <li class="is-active" role="presentation">
                    <a href="#tab--occupancyTypes">
                        <i class="fas fa-user-friends" aria-hidden="true"></i>
                        <span class="ml-2">Types and Fields</span>
                    </a>
                </li>
                <li role="presentation">
                    <a href="#tab--occupancyTypePrints">
                        <i class="fas fa-print" aria-hidden="true"></i>
                        <span class="ml-2">Prints</span>
                    </a>
                </li>
            </ul>
        </div>
        <div class="tab-container">
            <div id="tab--occupancyTypes">
                <div id="container--occupancyTypes"></div>
            </div>
            <div class="is-hidden" id="tab--occupancyTypePrints">
                <div class="columns">
                    <div class="column">
                        <div id="container--occupancyTypePrints"></div>
                    </div>
                    <div class="column is-4">
                        <div class="box">
                            <h2 class="title is-6">Available Prints</h2>
                            <ul class="fa-ul">
                                <% for (const [printEJS, printTitle] of Object.entries(occupancyTypePrintTitles)) { %>
                                    <% const printIconClass = printEJS.startsWith("pdf/") ? "fa-file-pdf" : "fa-file" %>
                                    <li>
                                        <span class="fa-li"><i class="fas <%= printIconClass %>" aria-hidden="true"></i></span>
                                        <%= printTitle %>
                                    </li>
                                <% } %>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<%- include('_footerA'); -%>

<script>
    exports.occupancyTypes = <%- JSON.stringify(occupancyTypes) %>;
    exports.allOccupancyTypeFields = <%- JSON.stringify(allOccupancyTypeFields) %>;
    exports.occupancyTypePrintTitles = <%- JSON.stringify(occupancyTypePrintTitles) %>;
</script>

<script src="<%= urlPrefix %>/javascripts/adminOccupancyTypes.min.js"></script>

<%- include('_footerB'); -%>
