<!DOCTYPE html>
<html lang="en" data-bs-theme="auto">

<head>
  <!-- TEMPLATE_HEADER - Used by Every UI Page -->
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Apollo</title>
<link rel="icon" type="image/x-icon" href="./images/apollo.ico">
<link href="./assets/css/apollo.css" rel="stylesheet" />


  <script type="text/javascript" src="./assets/js/qrcode.min.js"></script>
  <style scoped type="text/css">
    .content-container {
      padding-top: 2em;
    }

    .pin-tab-bar {
      margin-bottom: 2em !important;
    }
  </style>
  <script type="module" crossorigin src="./assets/pin-CS5sZjXm.js"></script>
  <link rel="modulepreload" crossorigin href="./assets/init-Ck7wRxmZ.js">
  <link rel="modulepreload" crossorigin href="./assets/theme-BfDtj5yE.js">
  <link rel="modulepreload" crossorigin href="./assets/_plugin-vue_export-helper-DlAUqK2U.js">
  <link rel="modulepreload" crossorigin href="./assets/Navbar-CshJBn-L.js">
  <link rel="modulepreload" crossorigin href="./assets/Checkbox-Cnqtybr8.js">
  <link rel="stylesheet" crossorigin href="./assets/init-D_k9xtOw.css">
  <link rel="stylesheet" crossorigin href="./assets/Navbar-dej49bs7.css">
</head>

<body id="app" v-cloak>
  <Navbar></Navbar>
  <div id="content" class="container content-container d-flex flex-column align-items-center">
    <ul class="nav nav-pills pin-tab-bar justify-content-center">
      <li class="nav-item">
        <a class="nav-link" :class="{active: currentTab !== '#PIN'}" href="#OTP" @click.prevent="switchTab('OTP')">{{ $t('pin.otp_pairing') }}</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" :class="{active: currentTab === '#PIN'}" href="#PIN" @click.prevent="switchTab('PIN')">{{ $t('pin.pin_pairing') }}</a>
      </li>
    </ul>
    <form v-if="currentTab === '#PIN'" class="form d-flex flex-column align-items-center" id="form" @submit.prevent="registerDevice">
      <div class="card flex-column d-flex p-4 mb-4">
        <input type="text" pattern="\d*" :placeholder="`${$t('navbar.pin')}`" autofocus id="pin-input" class="form-control mt-2" required />
        <input type="text" :placeholder="`${$t('pin.device_name')}`" id="name-input" class="form-control my-4" />
        <button class="btn btn-primary">{{ $t('pin.send') }}</button>
      </div>
      <div id="status"></div>
    </form>
    <form v-else class="form d-flex flex-column align-items-center" @submit.prevent="requestOTP">
      <div class="card flex-column d-flex p-4 mb-4">
        <div v-show="editingHost || (otp && hostAddr)" id="qrRef"></div>
        <p v-if="editingHost || (otp && hostAddr)" class="text-center text-secondary"><a class="text-secondary" :href="deepLink">art://{{ hostAddr }}:{{ hostPort }}</a> <i class="fas fa-fw fa-pen-to-square" @click="editHost"></i></p>
        <h1 class="mb-4 text-center">{{ otp && otp || '????' }}</h1>
        <div v-if="editingHost" class="d-flex flex-column align-items-stretch">
          <input type="text" placeholder="HOST" v-model="hostAddr" autofocus class="form-control mt-2" />
          <input type="text" placeholder="PORT" v-model="hostPort" class="form-control my-4" />
          <button class="btn btn-primary" :disabled="!this.canSaveHost" @click.prevent="saveHost">{{ $t('_common.save') }}</button>
        </div>
        <div v-else class="d-flex flex-column align-items-stretch">
          <input type="text" pattern="[0-9a-zA-Z]{4,}" :placeholder="`${$t('pin.otp_passphrase')}`" v-model="passphrase" required autofocus class="form-control mt-2" />
          <input type="text" :placeholder="`${$t('pin.device_name')}`" v-model="deviceName" class="form-control my-4" />
          <button class="btn btn-primary">{{ $t('pin.generate_pin') }}</button>
        </div>
      </div>
      <div v-if="otpMessage" class="alert" :class="['alert-' + otpStatus]">{{ otpMessage }}</div>
      <div class="alert alert-info">{{ $t('pin.otp_msg') }}</div>
    </form>
    <div class="alert alert-warning">
      <b>{{ $t('_common.warning') }}</b> {{ $t('pin.warning_msg') }}
    </div>
    <!-- Manage Clients -->
    <div class="card my-4 align-self-stretch">
      <div class="card-body">
        <div class="p-2">
          <div class="d-flex justify-content-end align-items-center">
            <h2 id="unpair" class="me-auto">{{ $t('pin.device_management') }}</h2>
            <button class="btn btn-danger" :disabled="unpairAllPressed" @click="unpairAll">
              {{ $t('pin.unpair_all') }}
            </button>
          </div>
          <br />
          <p class="mb-0">{{ $t('pin.device_management_desc') }}</p>
          <p class="mb-0">{{ $t('pin.device_management_warning') }} <a href="https://github.com/ClassicOldSong/Apollo/wiki/Permission-System" target="_blank">{{ $t('_common.learn_more') }}</a></p>
          <div id="apply-alert" class="alert alert-success d-flex align-items-center mt-3" :style="{ 'display': (showApplyMessage ? 'flex !important': 'none !important') }">
            <div class="me-2"><b>{{ $t('_common.success') }}</b> {{ $t('pin.unpair_single_success') }}</div>
            <button class="btn btn-success ms-auto apply" @click="clickedApplyBanner">{{ $t('_common.dismiss') }}</button>
          </div>
          <div class="alert alert-success mt-3" v-if="unpairAllStatus === true">
            {{ $t('pin.unpair_all_success') }}
          </div>
          <div class="alert alert-danger mt-3" v-if="unpairAllStatus === false">
            {{ $t('pin.unpair_all_error') }}
          </div>
        </div>
      </div>
      <ul id="client-list" class="list-group list-group-flush list-group-item-light" v-if="clients && clients.length > 0">
        <template v-for="client in clients" class="list-group-item d-flex align-items-center">
          <div v-if="client.editing" class="list-group-item d-flex align-items-stretch flex-column">
            <div class="d-flex align-items-center">
              <div class="p-2 flex-grow-1 d-flex align-items-center">
                <span class="badge" :class="client.editPerm >= 0x04000000 ? 'bg-danger' : 'bg-primary'">
                  [ {{permToStr(client.editPerm)}} ]
                </span>
                &nbsp;
                <input v-model="client.editName" @keyup.enter="saveClient(client)" class="form-control flex-grow-1" type="text" :placeholder="$t('pin.device_name')">
              </div>
              <div class="me-2 btn btn-success" @click="saveClient(client)"><i class="fas fa-check"></i></div>
              <div class="me-2 btn btn-secondary" @click="cancelEdit(client)"><i class="fas fa-times"></i></div>
            </div>
            <div class="align-items-top d-flex flex-row justify-content-center">
              <div v-for="group in permissionGroups" class="d-flex flex-column mx-2">
                <div class="mx-2">{{ group.name }}:</div>
                <button v-for="perm in group.permissions" class="my-1 btn btn-sm" :disabled="isSuppressed(client.editPerm, perm.name, perm.suppressed_by)" :class="(isSuppressed(client.editPerm, perm.name, perm.suppressed_by) || checkPermission(client.editPerm, perm.name)) ? 'btn-success' : 'btn-outline-secondary'" @click="togglePermission(client, perm.name)">
                  {{ $t(`permissions.${perm.name}`) }}
                </button>
              </div>
            </div>

            <!-- Enable legacy ordering -->
            <Checkbox class="mb-3"
                      id="enable_legacy_ordering"
                      label="pin.enable_legacy_ordering"
                      desc="pin.enable_legacy_ordering_desc"
                      v-model="client.editEnableLegacyOrdering"
                      default="true"
            ></Checkbox>

            <!-- Always Use Virtual Display -->
            <Checkbox class="mb-3"
                      id="always_use_virtual_display"
                      label="pin.always_use_virtual_display"
                      desc="pin.always_use_virtual_display_desc"
                      v-model="client.editAlwaysUseVirtualDisplay"
                      default="false"
                      v-if="platform === 'windows'"
            ></Checkbox>
            <!-- Display Mode Override -->
            <div class="mb-3 mt-2">
              <label for="display_mode_override" class="form-label">{{ $t('pin.display_mode_override') }}</label>
              <input
                type="text"
                class="form-control"
                id="display_mode_override"
                v-model="client.editDisplayMode"
                placeholder="1920x1080x59.94"
                @input="validateModeOverride"
              />
              <div class="form-text">{{ $t('pin.display_mode_override_desc') }} <a href="https://github.com/ClassicOldSong/Apollo/wiki/Display-Mode-Override" target="_blank">{{ $t('_common.learn_more') }}</a></div>
            </div>

            <!-- Allow client commands -->
            <Checkbox class="mb-3"
                      id="allow_client_commands"
                      label="pin.allow_client_commands"
                      desc="pin.allow_client_commands_desc"
                      v-model="client.editAllowClientCommands"
                      default="true"
            ></Checkbox>

            <!-- connect/disconnect commands -->
            <div class="mb-3 mt-2 d-flex flex-column" v-for="cmdType in ['do', 'undo']" v-if="client.editAllowClientCommands">
              <label class="mb-0 orm-label">{{ $t(`pin.client_${cmdType}_cmd`) }}</label>
              <div class="form-text">{{ $t(`pin.client_${cmdType}_cmd_desc`) }} <a href="https://github.com/ClassicOldSong/Apollo/wiki/Client-Commands" target="_blank">{{ $t('_common.learn_more') }}</a></div>
              <table class="mt-2 table" v-if="client[`edit_${cmdType}`].length > 0">
                <thead>
                  <tr>
                    <th style="width: 80%"><i class="fas fa-terminal"></i> {{ $t('_common.cmd_val') }}</th>
                    <th style="min-width: 10em; max-width: 12em;" v-if="platform === 'windows'">
                      <i class="fas fa-shield-alt"></i> {{ $t('_common.run_as') }}
                    </th>
                    <th style="min-width: 110px;"></th>
                  </tr>
                </thead>
                <tbody>
                <tr v-for="(c, i) in client[`edit_${cmdType}`]">
                  <td>
                    <input type="text" class="form-control monospace" v-model="c.cmd" />
                  </td>
                  <td v-if="platform === 'windows'">
                    <div class="form-check">
                      <input type="checkbox" class="form-check-input" :id="`client-${cmdType}-cmd-admin-${i}`" v-model="c.elevated"/>
                      <label :for="`client-${cmdType}-cmd-admin-${i}`" class="form-check-label">{{ $t('_common.elevated') }}</label>
                    </div>
                  </td>
                  <td>
                    <button class="btn btn-danger me-2" @click="removeCmd(client[`edit_${cmdType}`], i)">
                      <i class="fas fa-trash"></i>
                    </button>
                    <button class="btn btn-success" @click="addCmd(client[`edit_${cmdType}`], i)">
                      <i class="fas fa-plus"></i>
                    </button>
                  </td>
                </tr>
                </tbody>
              </table>
              <button class="ms-0 mt-2 btn btn-success" style="margin: 0 auto" @click="addCmd(client[`edit_${cmdType}`], -1)">
                &plus; {{ $t('config.add') }}
              </button>
            </div>
          </div>
          <div v-else class="list-group-item d-flex align-items-center">
            <div class="p-2 flex-grow-1 d-flex align-items-center">
              <span class="badge" :class="client.perm >= 0x04000000 ? 'bg-danger' : 'bg-primary'">
                [ {{permToStr(client.perm)}} ]
              </span>
              &nbsp;
              <span class="me-2">{{client.name != "" ? client.name : $t('pin.unpair_single_unknown')}}</span>
            </div>
            <div v-if="client.connected" class="me-2 btn btn-warning" @click="disconnectClient(client.uuid)"><i class="fas fa-link-slash"></i></div>
            <div class="me-2 btn btn-primary" @click="editClient(client)"><i class="fas fa-edit"></i></div>
            <div class="me-2 btn btn-danger" @click="unpairSingle(client.uuid)"><i class="fas fa-trash"></i></div>
          </div>
        </template>
      </ul>
      <ul v-else class="list-group list-group-flush list-group-item-light">
        <div class="list-group-item p-3 text-center"><em>{{ $t('pin.unpair_single_no_devices') }}</em></div>
      </ul>
    </div>
  </div>
</body>

