<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <script src="https://unpkg.com/vue@2"></script>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" />
        <style>
            .full-height-flex {
                display: flex;
                flex-direction: column;
                height: 100vh;
            }
            .header-flex {
                display: flex;
                flex-direction: column;
            }
            .body-flex {
                display: flex;
                flex-direction: column;
                overflow-y: auto;
            }
        </style>
    </head>

    <body>
        <div id="app" class="container-fluid">
            <div class="row">
                <div class="col-6 full-height-flex">
                    <h3 class="mt-2 mb-4">CSDR custom installation (experimental)</h3>

                    <div class="header-flex">
                        <h5 class="mb-3">Choose an app / euiVersion</h5>
                        <form>
                            <div class="row mb-3">
                                <label class="col-sm-2 col-form-label">App</label>
                                <div class="col-sm-10">
                                    <select disabled class="form-select" v-model="selectedProject">
                                        <option value="my-workplace-host-playground-custom">MyWorkplace</option>
                                    </select>
                                </div>
                            </div>
                            <div class="row mb-3">
                                <label class="col-sm-2 col-form-label">eUI Version</label>
                                <div class="col-sm-10">
                                    <select dis abled class="form-select" v-model="selectedEuiVersion">
                                        <option value="16.x">eUI 16</option>
                                    </select>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="body-flex">
                        <div class="d-flex align-items-center mt-2">
                            <h5>Select the remote(s) you want to work with:</h5>
                            <div class="ms-auto me-2">
                                <button class="btn btn-light" @click="reset()">reset</button>
                            </div>
                        </div>

                        <p class="text-warning fw-bold">select at least one remote to work on</p>
                        <table class="table table-striped" v-show="remotes.length !== 0">
                            <thead>
                                <tr>
                                    <th scope="col">Remote</th>
                                    <!-- <th scope="col">Participant</th> -->
                                    <th scope="col">Full SK</th>
                                    <th scope="col">Local</th>
                                    <th scope="col">Installed</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="remote in remotes">
                                    <td>{{ remote.name }}</td>
                                    <!-- <td>
                                        <div :class="{ 'text-primary fw-bold': remote.participant }">{{ remote.participant }}</div>
                                    </td> -->
                                    <td>
                                        <div :class="{ 'text-success fw-bold': remote.fullSkeletonSources }">
                                            {{ remote.fullSkeletonSources }}
                                        </div>
                                    </td>
                                    <td>
                                        <div class="form-check form-switch">
                                            <input
                                                class="form-check-input"
                                                type="checkbox"
                                                :value="remote.name"
                                                :id="remote.name"
                                                :disabled="isInstallRemoteSelected(remote.name)"
                                                v-model="selectedRemotes" />
                                        </div>
                                    </td>
                                    <td>
                                        <div class="form-check form-switch">
                                            <input
                                                class="form-check-input"
                                                type="checkbox"
                                                :value="remote.name"
                                                :id="remote.name"
                                                :disabled="isRemoteSelected(remote.name)"
                                                v-model="selectedInstalledRemotes" />
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                <div class="col-6">
                    <h5 class="mt-5 mb-3">
                        Selected remotes - intialized as sources:
                        <span class="text-primary fw-bold">{{ selectedRemotes.length }}</span>
                    </h5>
                    {{ selectedRemotes }}
                    <h5 class="mt-5 mb-3">
                        Selected "to-be-installed" remotes - intialized as dependencies:
                        <span class="text-primary fw-bold">{{ selectedInstalledRemotes.length }}</span>
                    </h5>
                    {{ selectedInstalledRemotes }}

                    <h5 class="mt-5 mb-3">
                        Derived dependencies:
                        <span class="text-primary fw-bold">{{ deps.length }}</span>
                    </h5>
                    {{ deps }}

                    <h5 class="mt-5 mb-3">
                        Derived UI packages to be locally cloned :
                        <span class="text-primary fw-bold">{{ packages.length }}</span>
                    </h5>
                    <!-- {{ packages }} -->
                    <table class="table table-striped" v-show="packages.length !== 0">
                        <thead>
                            <tr>
                                <th scope="col">Pkg name</th>
                                <th scope="col">Branch</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="pkg in packages">
                                <td>{{pkg.name}}</td>
                                <td><input type="text" class="form-control" :id="pkg.name" v-model="pkg.branch"></td>
                            </tr>
                        </tbody>
                    </table>
                    <!-- <div class="form-group row" v-for="pkg in packages">
                        <label class="col-sm-2 col-form-label">{{ pkg.name }}</label>
                        <div class="col-sm-10">
                          <input type="email" class="form-control" id="{{pkg.name}}" :value="pkg.branch">
                        </div>
                    </div> -->

                    <hr />

                    <button
                        class="btn btn-primary"
                        type="button"
                        :disabled="selectedRemotes.length === 0 && selectedInstalledRemotes.length === 0"
                        @click="saveConfig()">
                        Save configuration
                    </button>

                    <div v-if="saveConfigSubmitted" class="mt-2">
                        <div v-if="saveConfigOK" class="alert alert-success">Configuration successfully saved</div>
                        <div v-if="!saveConfigOK" class="alert alert-danger">Error saving configuration</div>

                        <div class="alert alert-info mt-2">
                            <p>
                                <span class="fw-bold">./csdr/.euirc-csdr-custom.json</span>
                                generated
                            </p>
                            <p>
                                Execute after the
                                <strong>npm run init -- --custom [--git local]</strong> from your command line to follow progress of installation
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>

    <script src="index.js"></script>
</html>
