DCSOlympus/manager/ejs/managerinstallations.ejs

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

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

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

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

    #manager-installations .scrollable>.option.selected {
        background-color: var(--blue);
    }

    #manager-installations .scrollable>.option .checkbox {
        padding-right: 20px;
        content: url("./icons/square-regular.svg");
    }

    #manager-installations .scrollable>.option.selected .checkbox {
        content: url("./icons/check-solid.svg");
    }

    #manager-installations .scrollable>.option>div {
        display: flex;
        flex-direction: column;
        row-gap: 5px;
    }

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

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

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

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

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

    #manager-installations>.instructions {
        margin-bottom: 10px;
    }

    #manager-installations>.buttons-footer {
        margin-top: 10px;
    }

</style>
<div id="manager-installations">
    <div class="page-header">
        Step 1: Select DCS Installations
    </div>
    <div class="instructions">
        <span>
            Select the copy of DCS you want to install Olympus to.
        </span>
        <span>
            For most people, this is your main DCS installation. 
        </span>
        <span>
            If you are running a dedicated server, you would also install Olympus to this DCS version.
        </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 %>">
                    <img class="checkbox">
                    <div>
                        <span><%= instances[i].name %></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>
                        
                        <span><img src="./icons/folder-open-solid.svg"> <%= instances[i].folder %></span>
                    </div>
                </div>
            <% } %>
        </div>
    </div>
    
    <div class="buttons-footer">
        <div class="button back">
            Back
        </div>
        <div class="button next">
            Next
        </div>
        <div class="button cancel">
            Cancel
        </div>
    </div>
</div>