DCSOlympus/manager/ejs/installation.ejs

<style>
    #manager-installations .scroll-container {
        height: 100%;
        overflow-y: auto;
    }  

    #manager-installations .scrollable {
        display: flex;
        flex-direction: column;
        row-gap: 8px;
        height: fit-content;
        align-items: center;
        padding: 15px;
    }

    #manager-installations .option {
        cursor: pointer;
        background-color: var(--darkgray);
        width: 600px;
        height: 100px;
        color: white;
        display: flex;
        font-size: 13px;
        font-weight: 600;
        padding-left: 15px;
        align-items: center;
        border-radius: 5px;
    }

    #manager-installations .option * {
        pointer-events: none;
    }

    #manager-installations .option {
        position: relative;
        display: flex;
        flex-direction: column;
        row-gap: 5px;
        align-items: start;
        justify-content: center;
    }

    #manager-installations .option>span:nth-child(1) {
        font-size: 18px;
        font-weight: 600;
    }

    #manager-installations .option>span:nth-child(2) {
        display: flex;
        column-gap: 10px;
        justify-content: center;
        font-size: 13px;
        font-weight: normal;
    }

    #manager-installations .option>span:nth-child(3) {
        font-size: 13px;
        font-weight: 600;
        color: var(--lightgray);
    }

    #manager-installations .option>span:nth-child(3).installed {
        font-weight: 600;
        color: var(--green);
    }

    #manager-installations .option>span:nth-child(3).error {
        font-weight: 600;
        color: orange;
    }

    #manager-installations .option.installed {
        pointer-events: none;
        background-color: var(--background-disabled);
    }

    #manager-installations .option:not(.installed)::after {
        display: block;
        content: " ";
        width: 20px;
        height: 20px;
        background-image: url("./icons/chevron-right-solid.svg");
        background-repeat: no-repeat;
        background-position: 50% 50%;
        position: absolute;
        right: 20px;
    }
</style>
<div id="manager-installations">
    <div class="step-summary">
        <div class="white <%= singleInstance? 'hide': '' %>"><%= install? 'User path': 'Instance selection' %></div>
        <div class="blue">Type of install</div>
        <div class="empty">Ports and address</div>
        <div class="empty">Passwords</div>
        <div class="empty"> <%= install? 'Install': 'Update' %></div>
    </div>
    <div class="content">
        <div class="instructions">
            <span>
                <% if (install) { %>
                    Select a DCS path to install Olympus to.
                <% } else { %>
                    Select an Olympus instance to edit.
                <% } %>
            </span>
            <span>
                <% if (install) { %>
                    We have automatically detected the following DCS installations under your Saved Games / DCS folder. 
                <% } else { %>
                    These are the DCS instances in which Olympus has already been installed.
                <% } %>
            </span>
            <span>
                <% if (install) { %>
                    Please select which DCS installations you want to add Olympus to.
                <% } else { %>
                    Please select which Olympus installations you want to edit.
                <% } %>
                
            </span>
        </div>
        <div class="scroll-container">
            <div class="scrollable">
                <% for (let i = 0; i < instances.length; i++) {%>
                    <div class="option" data-folder="<%= instances[i].folder %>">
                        <span><%= instances[i].name %></span>
                        <span><img src="./icons/folder-open-solid.svg"> <%= instances[i].folder %></span>
                        <span class="<%= instances[i].installed? (instances[i].error? 'error': 'installed'): '' %>"> 
                            <%= instances[i].installed? (instances[i].error? 'Corrupted/outdated Olympus installation': 'Olympus installed'): 'Olympus not installed' %>
                        </span>
                    </div>
                <% } %>
            </div>
        </div>
        <div class="button cancel">
            <% if (install) { %>
                Cancel installation
            <% } else { %>
                Cancel editing
            <% } %>
        </div>
    </div>
</div>