DCSOlympus/manager/ejs/installations.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 {
        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;
    }
</style>
<div id="manager-installations">
    <div class="step-summary">
        <div class="white">User path</div>
        <div class="empty">Ports and address</div>
        <div class="empty">Passwords</div>
        <div class="empty">Install</div>
    </div>
    <div class="content">
        <div class="instructions">
            <span>
                Select a DCS path to install Olympus to.
            </span>
            <span>
                We have automatically detected the following DCS installations under your Saved Games / DCS folder. 
            </span>
            <span>
                Please select which DCS installations you want to add Olympus to.
            </span>
        </div>
        <div class="scroll-container">
            <div class="scrollable">
                <% for (let i = 0; i < instances.length; i++) {%>
                    <div class="option <%= instances[i].installed? 'installed': '' %>" 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 already installed'): 'Olympus not installed yet' %>
                        </span>
                    </div>
                <% } %>
            </div>
        </div>
        
        <div class="button cancel">
            Cancel installation
        </div>
    </div>
</div>