<!-- Ministate is for mobile -->
    <q-layout class="bg-light web-page-layout" view="hhh LpR fff">
      <q-drawer role="navigation" aria-label="Options panel" bordered v-model="drawer" show-if-above :mini="sideMiniState && pinMiniState" @mouseover="sideMiniState = false" @mouseout="sideMiniState = true" :class="$q.dark.isActive ? 'bg-grey-9' : 'bg-grey-3'">
        <q-list padding>
          <!-- Loop through tabs -->
          <q-item :aria-label="btn" role="button" :disable="!loaded" class="buttonID" :active="innerTab === btn" @click="changeButton(btn)" active-class="side-nav-link" v-for="(btn, index) in buttonIDs" clickable v-ripple>
            <!-- @click="changeButton(btn)"  -->
            <q-item-section avatar>
              <q-icon :aria-label="btn" :name="buttonIcons[index]" />
            </q-item-section>
            <q-item-section>
              {{ btn }}
            </q-item-section>
          </q-item>
          <q-separator spaced inset />
          <!-- Pin sidebar -->
          <q-item v-if="!miniState" aria-label="Pin side bar" @click="pinMiniState = !pinMiniState" clickable v-ripple>
            <q-item-section avatar>
              <q-icon :name="!pinMiniState ? 'chevron_left' : 'chevron_right'" />
            </q-item-section>
            <q-item-section>
              Pin Sidebar
            </q-item-section>
          </q-item>
          <!-- Logout -->
          <q-item aria-label="Logout" @click="dumbOpen('https://web.osu.edu/Shibboleth.sso/Logout?return=https://web.osu.edu', false)" clickable v-ripple>
            <q-item-section avatar>
              <q-icon name="logout" />
            </q-item-section>
            <q-item-section>
              Logout
            </q-item-section>
          </q-item>
        </q-list>
        <!-- </q-scroll-area> -->
      </q-drawer>
      <!-- </q-page-sticky> -->
      <q-page-container class="bg-light cool-header">
        <!-- Site information -->
        <q-card class="qclayout">
          <!-- Buttons -->
          <div style="display: flex; left: 0; position: absolute;">
            <!-- Hamburger btn -->
            <q-btn aria-label="Open categories panel" v-if="miniState" class="q-mt-sm q-ml-md light" flat mini @click="drawer = !drawer" round dense icon="menu" />
            <q-btn icon="home" style="margin: 10px" color="negative" class="no-highlight" flat href="./">Dashboard</q-btn>
          </div>
          <header class="cool-header" style="text-align: center; padding-top: 10px; padding-bottom: 50px">
            <!--Header and search to go to other site pages -->
            <q-select ref="siteSelectorRef" transition-duration="150" input-debounce="0" v-model="model" use-input hide-selected fill-input :options="options" @filter="filterFn" @update:model-value="loadSite(model)" @keydown.enter.prevent="selectSiteEnter()" :style="{ marginLeft: miniState ? '1%' : '15%', width: miniState ? `99%` : `70%`, marginTop: miniState ? '2rem' : 'auto' }" style="outline: none; min-height: 5rem; height: 100px;" class="text-h4" popup-content-class="text-h5" aria-label="Site selector">
              <template v-slot:option="scope">
                <q-item v-bind="scope.itemProps">
                  <q-item-section>
                    {{scope.label}}
                  </q-item-section>
                  <!-- Only show you can select something if: it's the top option, there's not like a billion responses, and one of the options
                                        doesn't include the currently selected item (because pressing enter will do nothing) -->
                  <q-item-label v-if="scope.label === options[0] && (options.length < 10 && !options.includes(model))" class="text-grey">
                    Press enter to select...
                  </q-item-label>
                </q-item>
              </template>
              <template v-slot:no-option>
                <q-item>
                  <q-item-section class="text-grey">
                    No results
                  </q-item-section>
                </q-item>
              </template>
            </q-select>
          </header>
          <!-- Selector (dev, test, prod) -->
          <div aria-label="site search bar" style="background-color: #efefef;" class="stickyclass">
            <q-tabs v-model="activeInstance" dense style="background-color: #efefef;" class="tabs" active-class="bg-negative text-white" indicator-color="negative" align="justify">
              <q-tab style="width: 100%" :disable="!loaded" :name="instance.label" v-for="(instance, index) in instances" @click="switchTab(index)" :id="instance.label + '-button'">{{ instance.label }}</q-tab>
              <!-- For adding dev test or prod-->
              <q-tab v-if="isSuper && instances.length < 3" icon="add" :disable="!loaded" @click="openAdd()"></q-tab>
            </q-tabs>
          </div>
          <q-separator />
          <!-- START CONTENT -->
          <q-tab-panels v-model="innerTab" animated transition-prev="slide-down" transition-next="slide-up" class="q-mx-lg" id="tab-panels-focus">
            <!--General-->
            <q-tab-panel class="tp" name="General">
              <h2>General</h2>
              <div>
                <p style="margin: 0; font-size: 14px">
                  <b style="position: absolute; top: 0; right: 0; margin-top: 1rem; margin-right: 1rem;">
                    <a href="https://admin.resources.osu.edu/otdi-web-hosting/dashboard-definitions/#webroot-01" target="_blank">Webroot</a>: {{ data.webroot }}
                  </b>
                  <br>
                  <div style="position: absolute; top: 0; right: 0; margin-top: 2rem; margin-right: 1rem;" aria-label="Read more about storage (opens in new tab)" href="https://admin.resources.osu.edu/otdi-web-hosting/dashboard-definitions/#storage">
                    <a target="_blank" href="https://admin.resources.osu.edu/otdi-web-hosting/dashboard-definitions/#space-used">{{ (data.storageused / 1024 / 1024 / 1024).toFixed(2) + "GB" }} used</a>
                  </div>
                </p>
              </div>
              <table class="bux-table squeezeTable">
                <tbody>
                  <tr>
                    <th scope="row" :style="{ backgroundColor: changedData.name ? 'pink' : saveChangeColor }">
                      Name
                      <q-btn class="infoButton" v-if="!miniState" aria-label="Read more about site names (opens in new tab)" href="https://admin.resources.osu.edu/otdi-web-hosting/dashboard-definitions#name-01" target="_blank" round color="negative" size="xs" icon="info" style="margin-left: 5px;" />
                    </th>
                    <td>
                      <p>{{ data.name }}</p>
                    </td>
                  </tr>
                  <tr>
                    <th scope="row" :style="{ backgroundColor: changedData.manager ? 'pink' : saveChangeColor }">
                      Manager
                      <q-btn class="infoButton" v-if="!miniState" aria-label="Read more about manager (opens in new tab)" href="https://admin.resources.osu.edu/otdi-web-hosting/dashboard-definitions#manager-01" target="_blank" round color="negative" size="xs" icon="info" />
                    </th>
                    <td v-if="isSuper">
                      <q-input aria-label="Enter manager name.#" filled v-model="data.manager" @keydown.enter.prevent="saveData()" />
                      <q-btn v-if="changedData.manager" style="margin-top: 5px" class="bg-negative text-white text-center" @click="saveData()">{{ miniState ? 'Save' :'Save Changes' }}</q-btn>
                    </td>
                    <td v-if="!isSuper">{{ data.manager }}</td>
                  </tr>
                  <tr>
                    <th scope="row" :style="{ backgroundColor: changedData.description ? 'pink' : saveChangeColor }">
                      Description
                      <q-btn class="infoButton" v-if="!miniState" aria-label="Read more about description (opens in new tab)" href="https://admin.resources.osu.edu/otdi-web-hosting/dashboard-definitions#description-01" target="_blank" round color="negative" size="xs" icon="info" style="margin-left: 5px" />
                    </th>
                    <td>
                      <q-input aria-label="Enter description" filled v-model="data.description" @keydown.enter.prevent="saveData()" />
                      <q-btn v-if="changedData.description" style="margin-top: 5px" class="bg-negative text-white text-center" @click="saveData()">{{ miniState ? 'Save' :'Save Changes' }}</q-btn>
                    </td>
                  </tr>
                  <!-- Notfy Emails -->
                  <tr>
                    <th scope="row" :style="{ backgroundColor: changedData.notifyemail ? 'pink' : saveChangeColor }">
                      Notify Emails
                      <q-btn class="infoButton" v-if="!miniState" aria-label="Read more about notify emails (opens in new tab)" href="https://admin.resources.osu.edu/otdi-web-hosting/dashboard-definitions#notify-email" target="_blank" round color="negative" size="xs" icon="info" style="margin-left: 5px" />
                    </th>
                    <td>
                      <!-- Show inner table for emails -->
                      <q-expansion-item :duration="100" icon="email" label="Add New Email" style="border: 1px solid black; border-radius: 5px;" @after-show="this.$refs.notifyEmailRef.focus()">
                        <table class="bux-table">
                          <tbody>
                            <tr>
                              <th scope="row">Email Address</th>
                              <td>
                                <q-input ref="notifyEmailRef" filled v-model="addMailText" :rules="[val => /[a-z0-9]+@[a-z]+\.[a-z]{2,3}/.test(val) || 'Enter a valid email address']" @keydown.enter.prevent="addMail()" aria-label="Enter email address" />
                              </td>
                            </tr>
                          </tbody>
                        </table>
                        <q-btn class="q-mt-md q-mr-md justify-center items-center" color="negative" style="margin: 10px" aria-label="Add email" @click="addMail()">Add Email</q-btn>
                      </q-expansion-item>
                      <q-list class="q-mt-sm">
                        <q-item v-for="email in data.notifyemail">
                          <q-item-section avatar>
                            <q-icon color="negative" name="mail_outline" />
                          </q-item-section>
                          <q-item-section href="hi">{{ email }}</q-item-section>
                          <q-btn push color="negative" :aria-label="`Remove ${email}`" @click="removeMail(email)">Remove</q-btn>
                        </q-item>
                      </q-list>
                      <q-btn v-if="changedData.notifyemail" style="margin-top: 5px" class="bg-white text-negative text-center" @click="saveData()">{{ miniState ? 'Save' :'Save Changes' }}</q-btn>
                    </td>
                  </tr>
                </tbody>
              </table>
              <br>
              <table class="bux-table squeezeTable">
                <tbody>
                  <tr>
                    <th scope="row" :style="{ backgroundColor: changedData.servername ? 'pink' : saveChangeColor, textDecoration: 'underline' }">
                      <a :href="'//' + batchData.servername" target="_blank">Primary URL</a>
                      <q-btn class="infoButton" v-if="!miniState" aria-label="Read more about primary url (opens in new tab)" href="https://admin.resources.osu.edu/otdi-web-hosting/dashboard-definitions#primary-url" target="_blank" round color="negative" size="xs" icon="info" style="margin-left: 5px" />
                    </th>
                    <td>
                      <!-- Include subpath status -->
                      <q-input aria-label="Enter server name" filled v-model="data.servername" @keydown.enter.prevent="saveData()">
                        <!-- If subpathstatus exists -->
                        <template v-if="data.hasOwnProperty('subpathstatus')" v-slot:prepend>
                          <!-- if it's true, the parent site has approved the request. (green check) -->
                          <template v-if="data.subpathstatus === true">
                            <q-icon color="green" name="check_circle" />
                            <q-tooltip anchor="center middle" self="top middle" transition-show="scale" transition-hide="scale">
                              Your subpath request was approved.
                            </q-tooltip>
                          </template>
                          <!-- if it's false, the parent has actively dismissed without approving. (red X) -->
                          <template v-else-if="data.subpathstatus === false">
                            <q-icon color="negative" name="error" />
                            <q-tooltip anchor="center middle" self="top middle" transition-show="scale" transition-hide="scale">
                              Your subpath request was rejected. Contact the site managers for further details.
                            </q-tooltip>
                          </template>
                          <!-- if it's null then either an error occurred or it's still pending. (yellow question mark (nah)) -->
                          <template v-else>
                            <q-icon color="warning" name="pending" />
                            <q-tooltip anchor="center middle" self="top middle" transition-show="scale" transition-hide="scale">
                              Your subpath request is pending.
                            </q-tooltip>
                          </template>
                        </template>
                      </q-input>
                      <q-btn v-if="changedData.servername" style="margin-top: 5px" class="bg-negative text-white text-center" @click="saveData()">{{ miniState ? 'Save' :'Save Changes' }}</q-btn>
                    </td>
                  </tr>
                  <!-- Secondary URLs List -->
                  <tr>
                    <th scope="row" :style="{ backgroundColor: changedData.aliases ? 'pink' : saveChangeColor }">
                      Secondary URLs
                      <q-btn class="infoButton" v-if="!miniState" aria-label="Read more about seconary URLs (opens in new tab)" href="https://admin.resources.osu.edu/otdi-web-hosting/dashboard-definitions#secondary-urls" target="_blank" round color="negative" size="xs" icon="info" style="margin-left: 5px;" />
                    </th>
                    <td>
                      <!-- Show inner table for emails -->
                      <q-expansion-item :duration="100" icon="library_add" label="Add New URL" style="border: 1px solid black; border-radius: 5px;" @after-show="this.$refs.secondaryEmailRef.focus()">
                        <table class="bux-table">
                          <tbody>
                            <tr>
                              <th scope="row">URL</th>
                              <td>
                                <q-input ref="secondaryEmailRef" filled v-model="addURLText" @keydown.enter.prevent="addURL" aria-label="secondary URL" />
                              </td>
                            </tr>
                          </tbody>
                        </table>
                        <q-btn class="q-mt-md q-mr-md justify-center items-center" color="negative" style="margin: 10px;" @click="addURL">Add URL</q-btn>
                      </q-expansion-item>
                      <q-list class="q-mt-sm">
                        <q-item v-for="link in data.aliases">
                          <q-item-section avatar>
                            <q-icon color="negative" name="link" />
                          </q-item-section>
                          <q-item-section href="hi"><a :href="`//` + link" target="_blank">{{ link }}</a></q-item-section>
                          <q-btn push color="negative" :aria-label="`Remove ${link}`" @click="removeURL(link)">Remove</q-btn>
                        </q-item>
                      </q-list>
                      <q-btn v-if="changedData.aliases" style="margin-top: 5px" class="bg-white text-negative text-center" @click="saveData()">{{ miniState ? 'Save' :'Save Changes' }}</q-btn>
                    </td>
                  </tr>
                  <!-- Subsites -->
                  <tr v-if="data.subsites && data.subsites.length > 0">
                    <th scope="row" :style="{ backgroundColor: changedData.subsites ? 'pink' : saveChangeColor }">
                      Subsites
                      <q-btn class="infoButton" v-if="!miniState" aria-label="Read more about notify emails (opens in new tab)" href="https://admin.resources.osu.edu/otdi-web-hosting/dashboard-definitions/#subsites" target="_blank" round color="negative" size="xs" icon="info" style="margin-left: 5px" />
                    </th>
                    <td>
                      <!-- Unresolved subsite requests -->
                      <!-- Only show that there's an unresolved request if accepted is null -->
                      <div v-if="data.subsites.filter(item => item.dismissed === false && item.accepted === false).length > 0" style="border-radius: 10px; border: 1px dashed black; padding: 10px; margin-bottom: 20px">
                        <p>These accounts have requested to be subsites under your domain. Click <b>Resolve</b> to accept or deny the request.</p>
                        <table class="bux-table responsive-table q-mt-sm">
                          <thead>
                            <tr>
                              <th scope="column">Site</th>
                              <th>Subpath</th>
                              <th></th>
                            </tr>
                          </thead>
                          <template v-for="(subpath, key) in data.subsites">
                            <tr v-if="subpath.dismissed === false && subpath.accepted === false">
                              <td data-label="Site" scope="row">{{ subpath.target_name }}</td>
                              <td data-label="Subpath">{{ subpath.host_subpath }}</td>
                              <td scope="row">
                                <q-btn push color="primary" class="text-negative" @click="subpathPrompt[key] = !subpathPrompt[key]">Resolve</q-btn>
                                <q-btn flat no-caps style="margin-left: 10px" class="text-weight-regular" color="black" label="Dismiss" @click="dismissSubsite(key)" />
                              </td>
                            </tr>
                          </template>
                        </table>
                      </div>
                      <!-- Active subsites -->
                      <!-- Only show if there's an accepted site -->
                      <table v-if="data.subsites.filter(item => item.accepted === true).length > 0" class="bux-table responsive-table q-mt-sm">
                        <caption>Active subsites:</caption>
                        <thead>
                          <tr>
                            <th scope="column">Site</th>
                            <th>Subpath</th>
                            <th></th>
                          </tr>
                        </thead>
                        <template v-for="(subpath, key) in data.subsites">
                          <tr v-if="subpath.accepted">
                            <td data-label="Site" scope="row">{{ subpath.target_name }}</td>
                            <td data-label="Subpath">{{ subpath.host_subpath }}</td>
                            <td scope="row">
                              <q-btn push color="negative" class="text-negative" @click="deleteSubpathPrompt[key] = !deleteSubpathPrompt[key]">Remove</q-btn>
                              <q-dialog v-model="deleteSubpathPrompt[key]">
                                <q-card>
                                  <q-card-section class="row items-center" style="padding-bottom: 5px">
                                    <q-avatar icon="warning" color="negative" text-color="white" />
                                    <p class="q-ml-sm">You're about to forcibly remove <b>{{ subpath.target_name }}</b> from subsites.</p>
                                  </q-card-section>
                                  <q-card-section class="row items-center" style="padding-bottom: 5px">
                                    <p class="q-ml-sm">It's not recommended to remove subsites this way. You should communicate with the account admins to change the routing on their end to avoid breaking their site.</p>
                                  </q-card-section>
                                  <q-card-actions align="right">
                                    <q-btn flat label="Cancel" color="primary" v-close-popup />
                                    <q-btn flat :label="`Remove ${subpath.target_name}`" color="negative" @click="deleteSubpathPrompt[key] = false; resolveSubsite(key, false)" v-close-popup />
                                  </q-card-actions>
                                </q-card>
                              </q-dialog>
                            </td>
                          </tr>
                        </template>
                      </table>
                      <!-- Dismissed sites -->
                      <!-- Only show dismissed subsite requests if not accepted and not denied (nothing was pressed, AKA null), and if dismiss was clicked -->
                      <q-expansion-item :duration="100" v-if="data.subsites.filter(item => item.accepted === false && item.dismissed === true).length > 0" icon="do_disturb" label="Dismissed" style="border: 1px solid black; border-radius: 5px;">
                        <table class="bux-table responsive-table">
                          <thead>
                            <tr>
                              <th>Site</th>
                              <th>Subpath</th>
                              <th></th>
                            </tr>
                          </thead>
                          <template v-for="(subpath, key) in data.subsites">
                            <tr v-if="subpath.accepted === false && subpath.dismissed === true">
                              <td data-label="Site" scope="row">{{ subpath.target_name }}</td>
                              <td data-label="Subpath">{{ subpath.host_subpath }}</td>
                              <td scope="row">
                                <q-btn-group push>
                                  <q-btn push color="primary" class="text-negative" @click="subpathPrompt[key] = !subpathPrompt[key]">Resolve</q-btn>
                                </q-btn-group>
                              </td>
                            </tr>
                          </template>
                        </table>
                      </q-expansion-item>
                    </td>
                  </tr>
                </tbody>
              </table>
              <!-- Resolve dialogues -->
              <q-dialog v-for="(subpath, key) in data.subsites" v-model="subpathPrompt[key]">
                <q-card>
                  <q-card-section class="row items-center" style="padding-bottom: 5px">
                    <q-avatar icon="subdirectory_arrow_right" color="negative" text-color="white" />
                    <p class="q-ml-sm">Approve <b>{{ subpath.target_name }}</b> subsite request?</p>
                  </q-card-section>
                  <q-card-section class="row items-center" style="padding-bottom: 5px">
                    <p class="q-ml-sm">{{ subpath.target_name }} will be a subsite of this domain. Ensure both parties are prepared for the new routing.</p>
                  </q-card-section>
                  <q-card-actions align="right">
                    <q-btn flat label="Cancel" color="primary" v-close-popup />
                    <q-btn color="green" label="Approve" @click="subpathPrompt[key] = false; resolveSubsite(key, true)" v-close-popup />
                  </q-card-actions>
                </q-card>
              </q-dialog>
              <br>
              <div class="q-pt-sm q-pb-sm">
                <div class="bux-card ">
                  <div class="bux-card__content" style="pointer-events: inherit">
                    <h3 class="bux-card__heading">Restart Website
                        <q-btn class="infoButton" v-if="!miniState" aria-label="Read more about environment variables (opens in new tab)" href="https://admin.resources.osu.edu/otdi-web-hosting/dashboard-definitions#clear-cache-restart-website" target="_blank" round color="negative" size="xs" icon="info" style="float: inherit; margin-left: 5px" />
                    </h3>
                    <div>
                      <p>Site will temporarily be down during restart.</p>
                      <br>
                      <q-btn style="margin-bottom: 10px;" color="negative" @click="restartContainer()">Clear Cache / Restart Website</q-btn>
                    </div>
                  </div>
                </div>
              </div>
            </q-tab-panel>
            <!-- Drupal -->
            <q-tab-panel class="tp" name="Drupal">
              <div class="bux-card ">
                <div class="bux-card__content">
                  <h3 class="bux-card__heading">
                                        <p>Clone</p>
                                    </h3>
                  <div class="bux-card__body">
                    Origin and Destination sites must have been deployed and installed first.
                  </div>
                </div>
                <!-- Table -->
                <table class="align-table" style="border-spacing: 1rem; border-collapse: inherit">
                  <tr>
                    <th style="width: 50%; padding-bottom: 0; text-align: left;">
                      <label class="bux-form__label" for="bux-selection-dropdown" style="font-size: 1.5em">Clone From</label>
                    </th>
                    <th style="width: 50%; padding-bottom: 0; text-align: left">
                      <label class="bux-form__label" for="bux-selection-dropdown" style="font-size: 1.5em">Clone To</label>
                    </th>
                  </tr>
                  <tr>
                    <td>
                      <!-- From -->
                      <q-select outlined v-model="fromServer" label="From..." :options="instances">
                        <template v-slot:option="scope">
                          <q-item v-bind="scope.itemProps">
                            <q-item-section>
                              <q-item-label>{{ scope.opt.value.name }}</q-item-label>
                              <q-item-label caption>{{ scope.label }}</q-item-label>
                            </q-item-section>
                          </q-item>
                        </template>
                      </q-select>
                    </td>
                    <td>
                      <!-- To -->
                      <q-select outlined v-model="toServer" label="To..." :options="instances">
                        <template v-slot:option="scope">
                          <q-item v-bind="scope.itemProps">
                            <q-item-section>
                              <q-item-label>{{ scope.opt.value.name }}</q-item-label>
                              <q-item-label caption>{{ scope.label }}</q-item-label>
                            </q-item-section>
                          </q-item>
                        </template>
                      </q-select>
                    </td>
                  </tr>
                </table>
                <q-checkbox color="negative" v-model="cloneContent" label="Clone content (recommended)" />
                <q-checkbox color="negative" v-model="cloneFiles" label="Clone files (recommended)" />
                <q-btn @click="clone()" color="negative" class="q-mt-md">Clone</q-btn>
              </div>
            </q-tab-panel>
            <!-- Server Options -->
            <q-tab-panel class="tp" name="Server Options">
              <div class="bux-card ">
                <div class="bux-card__content" style="pointer-events: inherit;">
                  <h2 class="bux-card__heading">
                    Server Options
                    <q-btn class="infoButton" v-if="!miniState" aria-label="Read more about mounts (opens in new tab)" href="https://admin.resources.osu.edu/otdi-web-hosting/dashboard-definitions#server-options" target="_blank" round color="negative" size="xs" icon="info" style="float: inherit; margin-left: 5px" />
                  </h2>
                  <div class="bux-card__body">
                    <p>
                      This is a list of options and features available your site. Note that changes to these settings can require up to 1 hour to take effect. Click <b>Save Changes</b> when finished.
                    </p>
                  </div>
                  <q-btn style="margin-bottom: 10px" class="bg-negative text-white text-center" @click="saveData()">Save Changes</q-btn>
                </div>
              </div>
              <br>
              <!-- Select business type -->
              <q-select outlined v-model="data.serveroptions.unittype" :style="{ backgroundColor: changedData.unittype ? 'pink' : 'inherit' }" label="Select business type..." :options="[{ 'label': 'College', 'value': 'college' }, { 'label': 'Department', 'value': 'department' }, { 'label': 'Office', 'value': 'office' }, { 'label': 'Student Organization', 'value': 'studentorg' }, { 'label': 'Affiliate', 'value': 'affiliate' }, { 'label': 'Other', 'value': 'other' }]" emit-value map-options>
                <template v-slot:prepend>
                  <q-btn @mousedown.stop.prevent @touchstart.stop.prevent class="infoButton" v-if="!miniState" aria-label="Read more about business types (opens in new tab)" @click="dumbOpen('https://admin.resources.osu.edu/otdi-web-hosting/dashboard-definitions#select-business-type')" round color="negative" size="xs" icon="info" style="margin: 0" />
                </template>
              </q-select>
              <br>
              <h3 class="bux-card__heading">Image
                <q-btn class="infoButton" v-if="!miniState" aria-label="Read more about image (opens in new tab)" href="https://admin.resources.osu.edu/otdi-web-hosting/dashboard-definitions#image-01" target="_blank" round color="negative" size="xs" icon="info" style="float: inherit; margin-left: 5px" />
              </h3>
              <!-- Select image -->
              <q-select outlined v-model="selectContainer" label="Select an image..." :style="{ backgroundColor: changedData.image ? 'pink' : saveChangeColor }" :options="containers" emit-value option-value="name">
                <template v-slot:option="scope">
                  <q-item v-bind="scope.itemProps">
                    <q-item-section>
                      <q-item-label>{{ scope.opt.name }}</q-item-label>
                      <q-item-label caption>{{ scope.opt.description }}</q-item-label>
                    </q-item-section>
                  </q-item>
                </template>
              </q-select>
              <q-btn style="margin-top: 10px" v-if="changedData.image" class="bg-negative text-white text-center q-mb-md" @click="saveData()">Save Changes</q-btn>
              <!-- </div> -->
              <!-- For each option -->
              <div class="q-mt-sm" v-for="option in serveroptions">
                <div v-if="option.userconfigurable === 't' && regex(option)">
                  <q-checkbox color="negative" v-model="data.serveroptions[option.name]" :style="{ backgroundColor: changedData[option.name] ? 'pink' : 'in
herit' }" :label="option.description" />
                  <q-tooltip v-if="option.helptext" anchor="center middle" self="top middle" transition-show="scale" transition-hide="scale">
                    {{ option.helptext }}
                  </q-tooltip>
                  <q-btn v-if="!miniState && option.helpurl != null" class="infoButton" :href="option.helpurl" target="_blank" round color="negative" size="xs" icon="info" :aria-label="`Read more about ${option.name} (opens in new tab)`" style="margin-top: 5px">
                  </q-btn>
                </div>
              </div>
              <!-- Super admin options -->
              <div v-if="isSuper" style="margin-top: 30px;">
                <h2 class="bux-card__heading">Admin Options</h2>
                <div class="q-mt-sm" v-for="option in serveroptions">
                  <q-checkbox v-if="option.userconfigurable === 'f' && regex(option)" color="negative" v-model="data.serveroptions[option.name]" :style="{ backgroundColor: changedData[option.name] ? 'pink' : 'inherit' }" :label="option.description" />
                </div>
              </div>
              <br>
              <!--Save Changes-->
              <div class="text-right">
                <q-btn style="content-align: center; height: 40px; margin-bottom: 20px; font-size: 1.1em;" class="bg-negative text-white text-center align-right" @click="saveData()">{{ miniState ? 'Save' : 'Save Changes' }}</q-btn>
              </div>
            </q-tab-panel>
            <!-- Env Configs -->
            <q-tab-panel class="tp" name="Env Configs">
              <div class="bux-card">
                <div class="bux-card__content" style="pointer-events: inherit;">
                  <h2 class="bux-card__heading">
                        Environment Configurations
                        <q-btn class="infoButton" v-if="!miniState" aria-label="Read more about environment variables (opens in new tab)" href="https://admin.resources.osu.edu/otdi-web-hosting/dashboard-definitions#env-configs" target="_blank" round color="negative" size="xs" icon="info" style="float: inherit; margin-left: 5px" />
                    </h2>
                  <div class="bux-card__body">
                    <p>Add, remove, and edit mounts and environment variables.</p>
                  </div>
                </div>
              </div>
              <br>
              <h3 class="bux-card__heading">
                Mounts
                <q-btn class="infoButton" v-if="!miniState" aria-label="Read more about mounts (opens in new tab)" href="https://admin.resources.osu.edu/otdi-web-hosting/dashboard-definitions#mounts-01" target="_blank" round color="negative" size="xs" icon="info" style="float: inherit; margin-left: 5px" />
              </h3>
              <div :style="{ padding: '10px', borderRadius: '10px', border: '5px solid', borderColor: changedData.mounts ? 'pink' : saveChangeColor }">
                <!-- Add mount -->
                <q-expansion-item :duration="100" icon="library_add" label="Add New Mount" style="border: 1px solid black; border-radius: 5px;" @after-show="this.$refs.addMountRef.focus()">
                  <table class="bux-table squeezeTable">
                    <p style="padding-left: 1rem !important; color: #C10015">
                      * Mandatory Fields
                    </p>
                    <tbody>
                      <tr>
                        <th scope="row">Mount *</th>
                        <td>
                          <q-input ref="addMountRef" aria-required="true" filled v-model="mountName" aria-label="Mount" />
                        </td>
                      </tr>
                      <tr>
                        <th scope="row">NFS Mount *</th>
                        <td>
                          <q-input filled :prefix="data.webroot + '/'" v-model="mountNfsMount" aria-required="true" aria-label="NFS mount" />
                        </td>
                      </tr>
                      <tr>
                        <th scope="row">Is Directory</th>
                        <td>
                          <q-checkbox color="negative" v-model="mountIsDirectory" aria-label="Is directory" />
                        </td>
                      </tr>
                      <tr>
                        <th scope="row">Read only</th>
                        <td>
                          <q-checkbox color="negative" v-model="mountReadOnly" aria-label="Read only" />
                        </td>
                      </tr>
                    </tbody>
                  </table>
                  <q-btn aria-label="Add mount" class="q-mt-md q-mr-md justify-center items-center" color="negative" style="margin: 10px;" @click="addMount()">Add Mount</q-btn>
                </q-expansion-item>
                <!-- Mount data -->
                <div v-for="(mount, key, index) in data.kube.mounts" :style="{ border: mount.mandatory ? 'none' : '1px solid gray', borderRadius: '5px', marginTop: '10px', padding: '10px' }">
                  <table class="bux-table squeezeTable">
                    <caption :aria-label="`${key} Mount`">Mount #{{index + 1}}</caption>
                    <tbody>
                      <tr>
                        <th scope="row">Mount{{ mount.mandatory ? " (mandatory)" : "" }}</th>
                        <td scope="row">
                          <label>{{ key }}</label>
                        </td>
                      </tr>
                      <tr>
                        <th scope="row">NFS Mount</th>
                        <td>
                          <q-input :prefix="data.webroot" filled v-model="mount.nfs_mount"></q-input>
                          <q-btn style="margin-top: 10px" v-if="mount.nfs_mount !== batchData.kube.mounts[key].nfs_mount" class="bg-negative text-white text-center q-mb-md" @click="saveData()">Save Changes</q-btn>
                        </td>
                      </tr>
                      <tr>
                        <th scope="row">Is Directory</th>
                        <td scope="row">
                          {{ mount.is_directory }}
                        </td>
                      </tr>
                      <tr>
                        <th scope="row">Read only</th>
                        <td scope="row">
                          {{ mount.readonly }}
                          <div class="float-right">
                            <q-btn push :color="mount.mandatory ? 'grey' : 'negative'" :disable="mount.mandatory" @click="deleteMountPrompt[key] = !deleteMountPrompt[key]">{{ mount.mandatory ? "Cannot Remove Mandatory Mount" : `Remove ${key} Mount`}}</q-btn>
                          </div>
                        </td>
                        <!-- Delete mount prompt -->
                        <q-dialog v-model="deleteMountPrompt[key]">
                          <q-card>
                            <q-card-section class="row items-center" style="padding-bottom: 5px">
                              <q-avatar icon="warning" color="negative" text-color="white" />
                              <p class="q-ml-sm"><b>This will delete the {{ key }}
                                                                    mount</b>.
                                <br>This action cannot be undone. Are you sure you want to do this?</p>
                            </q-card-section>
                            <q-card-actions align="right">
                              <q-btn flat label="Cancel" color="primary" v-close-popup />
                              <q-btn flat :label="`Delete ${mount.nfs_mount}`" color="negative" @click="deleteMountPrompt[key] = false; removeMount(key)" v-close-popup />
                            </q-card-actions>
                          </q-card>
                        </q-dialog>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
              <br>
              <h3 class="bux-card__heading">
                Environment Variables
                <q-btn class="infoButton" v-if="!miniState" aria-label="Read more about mounts (opens in new tab)" href="https://admin.resources.osu.edu/otdi-web-hosting/dashboard-definitions#environment-variables" target="_blank" round color="negative" size="xs" icon="info" style="float: inherit; margin-left: 5px" />
            </h3>
              <div :style="{ padding: '10px', borderRadius: '10px', border: '5px solid', borderColor: changedData.environment ? 'pink' : saveChangeColor }">
                <!-- Add New Envt Var -->
                <q-expansion-item :duration="100" icon="library_add" label="Add New Environment Variable" style="border: 1px solid black; border-radius: 5px;" @after-show="this.$refs.envrRef.focus()">
                  <table class="bux-table squeezeTable">
                    <p style="padding-left: 1rem !important; color: #C10015">
                      * Mandatory Fields
                    </p>
                    <tbody>
                      <tr>
                        <th scope="row">Name *</th>
                        <td>
                          <q-input ref="envrRef" filled v-model="envVarName"  aria-required="true" aria-label="Environment variable name" />
                        </td>
                      </tr>
                      <tr>
                        <th scope="row">Value *</th>
                        <td>
                          <q-input filled v-model="envVarValue" @keydown.enter.prevent="addEnvVar" aria-required="true" aria-label="Environment variable value" />
                        </td>
                      </tr>
                    </tbody>
                  </table>
                  <q-btn class="q-mt-md q-mr-md justify-center items-center" color="negative" style="margin: 10px;" @click="addEnvVar()">Add New Environment Variable</q-btn>
                </q-expansion-item>
                <!-- Environment variables -->
                <br>
                <p>A Save Changes button will appear after you edit any values.</p>
                <q-list>
                  <q-item v-for="(envt, key) in data.kube.environment">
                    <q-item-section avatar>
                      <q-icon name="label" color="black" />
                    </q-item-section>
                    <q-item-section avatar>
                      <p class="bux-card__heading">{{ key }}</p>
                    </q-item-section>
                    <q-separator spaced inset />
                    <q-item-section style="align-items: baseline;">
                      <q-input style="min-width: 80%;" :label="!batchData.kube.environment[key].value ? 'Value is hidden' : undefined" filled v-model="data.kube.environment[key].value" @keydown.enter.prevent="saveData()" :aria-label="key" />
                      <q-btn style="margin-top: 10px" v-if="data.kube.environment[key].value !== batchData.kube.environment[key].value" class="bg-negative text-white text-center q-mb-md" @click="saveData()">Save Changes</q-btn>
                    </q-item-section>
                    <q-item-section side>
                      <q-btn icon="delete" push v-if="!data.kube.environment[key].mandatory" :disable="data.kube.environment[key].mandatory" :color="data.kube.environment[key].mandatory ? 'grey' : 'negative'" @click="deleteEnvVarPrompt[key] = !deleteEnvVarPrompt[key]" style="float: right" :aria-label="`Remove ${key}`" round />
                    </q-item-section>
                    <!-- Delete env var prompt -->
                    <q-dialog v-model="deleteEnvVarPrompt[key]">
                      <q-card>
                        <q-card-section class="row items-center" style="padding-bottom: 5px">
                          <q-avatar icon="warning" color="negative" text-color="white" />
                          <p class="q-ml-sm"><b>This will delete the "{{ key }}" variable</b>.
                            <br>This action cannot be undone. Are you sure you want to do this?</p>
                        </q-card-section>
                        <q-card-actions align="right">
                          <q-btn flat label="Cancel" color="primary" v-close-popup />
                          <q-btn flat :label="`Delete ${key}`" color="negative" @click="deleteEnvVarPrompt[key] = false; removeEnvVar(key)" v-close-popup />
                        </q-card-actions>
                      </q-card>
                    </q-dialog>
                  </q-item>
                </q-list>
              </div>
              <br>
            </q-tab-panel>
            <!-- Databases -->
            <q-tab-panel class="tp" name="Databases">
              <div class="bux-card">
                <div class="bux-card__content" style="pointer-events: inherit;">
                  <h2 class="bux-card__heading">
                    Databases
                    <q-btn class="infoButton" v-if="!miniState" href="https://admin.resources.osu.edu/otdi-web-hosting/databases" target="_blank" round color="negative" size="xs" icon="info" aria-label="Read more about databases (opens in new tab)" style="margin-left: 5px; float: inherit;" />
                </h2>
                  <div class="bux-card__body">
                    <p>Create, modify, and delete databases. Databases are accessible with <a style="color: #C10015;" target="_blank" aria-label="Go to PHP my admin login page  (opens in new tab)" href="https://webdb.osu.edu/">phpMyAdmin</a>.</p>
                  </div>
                  <!-- Add new database -->
                  <q-expansion-item :duration="100" icon="library_add" label="Add New Database" style="border: 1px solid black; border-radius: 5px; user-select: none;" aria-label="Add new database" @after-show="this.$refs.databaseRef.focus()">
                    <table class="bux-table squeezeTable">
                      <p style="padding-left: 1rem !important; color: #C10015">
                        * Mandatory Fields
                      </p>
                      <tbody>
                        <tr>
                          <th scope="row">Database Name *</th>
                          <td>
                            <q-input filled ref="databaseRef" v-model="dbName" aria-required="true" aria-label="database name" />
                          </td>
                        </tr>
                        <tr>
                          <th scope="row">Description *</th>
                          <td>
                            <q-input filled v-model="dbDescription" aria-required="true" aria-label="description" />
                          </td>
                        </tr>
                        <tr>
                          <th scope="row">Host *</th>
                          <td aria-required="true">
                            <q-select outlined v-model="dbHost" aria-required="true" label="Select a host..." :options="dbDatabases" emit-value option-value="name">
                              <template v-slot:option="scope">
                                <q-item v-bind="scope.itemProps" aria-label="host">
                                  <q-item-section>
                                    <q-item-label>{{ scope.opt.name }}</q-item-label>
                                    <q-item-label caption>{{ scope.opt.host }}
                                    </q-item-label>
                                  </q-item-section>
                                </q-item>
                              </template>
                            </q-select>
                          </td>
                        </tr>
                      </tbody>
                    </table>
                    <q-btn color="negative" style="margin: 10px;" @click="addDB()">Create Database</q-btn>
                  </q-expansion-item>
                  <q-btn push class="q-mt-lg" color="negative" v-if="data.dbs.length" @click="deleteAllPrompt = !deleteAllPrompt">Delete all databases</q-btn>
                  <p v-if="data.dbs.length" style="margin-top: 5px; font-size: 0.9em">(clicking will open a confirmation dialog)
                  </p>
                  <!-- Delete all prompt -->
                  <q-dialog v-model="deleteAllPrompt">
                    <q-card>
                      <q-card-section class="row items-center" style="padding-bottom: 5px">
                        <q-avatar icon="warning" color="negative" text-color="white" />
                        <p class="q-ml-sm">Hey now... that's quite the button you're about to push!
                        </p>
                      </q-card-section>
                      <q-card-section class="row items-center">
                        <p class="q-ml-sm">This will delete up to 50 databases from {{ data.name + " (" + data.type + ")" }}.
                          <br><b>This action cannot be undone. Are you
                                                        sure you want to do this?</b></p>
                      </q-card-section>
                      <q-card-actions align="right">
                        <q-btn flat label="Cancel" color="primary" v-close-popup />
                        <q-btn flat label="I know what I'm doing" color="negative" @click="deleteAllPrompt = false; deleteAllConfirmed()" v-close-popup />
                      </q-card-actions>
                    </q-card>
                  </q-dialog>
                </div>
              </div>
              <br>
              <table class="bux-table responsive-table">
                <thead>
                  <tr>
                    <th scope="Name">Name</th>
                    <th scope="Description">Users</th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="(DB, index) in data.dbs">
                    <!-- Database -->
                    <td data-label="Name">
                      <div style="display: flex; gap: 15px">
                        <div>
                          <p style="margin-bottom: 0"><b>{{ DB.name }}</b></p>
                          <p style="font-size: 0.9em"><i>"{{ DB.description }}"</i></p>
                        </div>
                        <div style="display: flex; align-items: center; padding-bottom: 10px">
                          <q-btn icon="delete" size="md" round color="negative" :aria-label="`Delete ${DB.name} database`" class="bg-negative text-white text-center" @click="deleteDatabasePrompt[index] = !deleteDatabasePrompt[index]"></q-btn>
                        </div>
                      </div>
                      <!-- Delete database prompt -->
                      <q-dialog v-model="deleteDatabasePrompt[index]">
                        <q-card>
                          <q-card-section class="row items-center" style="padding-bottom: 5px">
                            <q-avatar icon="warning" color="negative" text-color="white" />
                            <p class="q-ml-sm"><b>This will delete the {{ DB.name }}
                                                                database</b>.
                              <br>This action cannot be undone. Are you sure you want to do this?</p>
                          </q-card-section>
                          <q-card-actions align="right">
                            <q-btn flat label="Cancel" color="primary" v-close-popup />
                            <q-btn flat :label="'Delete ' + DB.name" color="negative" @click="deleteDatabasePrompt[index] = false; deleteDatabase(index)" v-close-popup />
                          </q-card-actions>
                        </q-card>
                      </q-dialog>
                    </td>
                    <!-- Users -->
                    <td data-label="Users">
                      <q-btn aria-label="Click to load users" class="text-negative" @click="displayDbUser(index); dbShowUsers[DB.name] = true;">Load users</q-btn>
                      <div v-if="dbShowUsers[DB.name]">
                        <q-list bordered class="q-mt-sm">
                          <q-item v-for="(user, userIndex) in DB.users">
                            <q-item-section avatar>
                              <q-btn push :aria-label="`Remove user ${user} from database`" icon="remove" round size="xs" class="text-white bg-negative" @click="dbDeleteUser[DB.name + user] = !dbDeleteUser[DB.name + user]" />
                            </q-item-section>
                            <q-item-section href="hi">{{ user }}</q-item-section>
                            <!-- Delete user prompt -->
                            <q-dialog v-model="dbDeleteUser[DB.name + user]">
                              <q-card>
                                <q-card-section class="row items-center" style="padding-bottom: 5px">
                                  <q-avatar icon="delete" color="negative" text-color="white" />
                                  <p class="q-ml-sm">This will delete the <b>{{ user }}</b> database user.
                                    <br>This action cannot be undone. Are you sure you want to do this?</p>
                                </q-card-section>
                                <q-card-actions align="right">
                                  <q-btn flat label="Cancel" color="primary" v-close-popup />
                                  <q-btn flat label="Delete" color="negative" @click="dbDeleteUser[DB.name + user] = false; deleteDbUser(index, userIndex)" v-close-popup />
                                </q-card-actions>
                              </q-card>
                            </q-dialog>
                          </q-item>
                          <q-btn class="q-pa-md" flat icon="person_add" label="Add New User" color="primary" @click="dbAddUser[DB.name] = true" />
                          <q-dialog v-model="dbAddUser[DB.name]">
                            <q-card>
                              <q-card-section class="row items-center" style="padding-bottom: 0;">
                                <p>Add new user in <b>{{ DB.name }}:</b></p>
                              </q-card-section>
                              <q-card-section class="row items-center" style="padding-bottom: 0;">
                                <p style="margin-bottom: 0; color: #C10015">* Mandatory Fields</p>
                              </q-card-section>
                              <q-card-section class="row items-center" style="padding-bottom: 5px; gap: 10px">

                                <q-input aria-required="true" aria-label="Enter username" label="Username *" filled v-model="dbNewLogin" />
                                <q-input aria-required="true" aria-label="Enter password" label="Password *" filled v-model="dbNewPassword" @keydown.enter.prevent="addDbUser(index)" />
                              </q-card-section>
                              <q-card-actions align="right">
                                <q-btn flat label="Cancel" color="primary" v-close-popup />
                                <q-btn flat label="Add User" color="green" :disable="!dbNewLogin || !dbNewPassword" @click="addDbUser(index)" v-close-popup />
                              </q-card-actions>
                            </q-card>
                          </q-dialog>
                        </q-list>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
              <div style="font-size: 18px; padding: 15px" v-if="data.dbs.length == 0">No databases. Create one with <b>Add New Database</b>.</div>
            </q-tab-panel>
            <!-- Restore -->
            <q-tab-panel class="tp" name="Restore">
              <div class="bux-card ">
                <div class="bux-card__content" style="pointer-events: inherit;">
                  <h2 class="bux-card__heading">
                    Restore
                    <q-btn class="infoButton" v-if="!miniState" aria-label="Read more about restore (opens in new tab)" href="https://admin.resources.osu.edu/otdi-web-hosting/dashboard-definitions/#restore-01" target="_blank" round color="negative" size="xs" icon="info" style="float: inherit; margin-left: 5px" />
                </h2>
                  <div class="bux-card__body">
                    <p>Every day, a snapshot is taken of your files (including a database backup). This panel allows you to restore one of those snapshots alongside your existing site. The restore does <b>NOT</b> overwrite your exisiting files, and by default will appear in your site directory alongside your htdocs directory. Learn how to recover files <a class="text-negative text-center bg-white" target="_blank" href="https://admin.resources.osu.edu/otdi-web-hosting/recover-an-otdi-web-hosted-site#begin-recovery-of-files-from-web-hosting-dashboard">here</a>.</p>
                  </div>
                </div>
              </div>
              <table class="align-table squeezeTable" style="border-spacing: 1rem; border-collapse: inherit; width: 100%">
                <tr>
                  <!-- Get Snapshots -->
                  <th scope="row" style="text-align: left">
                    <q-expansion-item :duration="100" v-model="showSnapshots" icon="cloud_download" label="Get Snapshots" style="border: 1px solid black; border-radius: 5px;" @show="loadSnapshots()">
                      <p style="padding: 20px; border-bottom: 1px solid black">
                        Select a time to restore from with <b>Restore</b>.
                        <q-btn class="infoButton" v-if="!miniState" aria-label="Read more about get snapshots(opens in new tab)" href="https://admin.resources.osu.edu/otdi-web-hosting/dashboard-definitions#get-snapshots" target="_blank" round color="negative" size="xs" icon="info" style="margin-left: 5px" />
                      </p>
                      <q-scroll-area style="height: 400px;">
                        <template v-for="(snapshot, key) in snapshots">
                          <div style="display: flex; justify-content: space-between; align-items: center; margin: 0px 20px">
                            <p style="padding-top: 20px">{{ snapshot.friendlyts }}</p>
                            <q-btn :aria-label="`Restore from ${snapshot.friendlyts}`" color="negative" @click="restoreSnapshotPrompt[key] = true">Restore</q-btn>
                          </div>
                          <!-- Snapshot dialog -->
                          <q-dialog v-model="restoreSnapshotPrompt[key]">
                            <q-card>
                              <q-card-section class="row items-center" style="padding-bottom: 5px">
                                <q-avatar icon="warning" color="negative" text-color="white" />
                                <p class="q-ml-sm">This will restore <b>{{ data.name }}</b> from <b>{{ snapshot.friendlyts }}</b>.
                                  <br>It will take some time to complete.</p>
                              </q-card-section>
                              <q-card-actions align="right">
                                <q-btn flat label="Cancel" color="primary" v-close-popup />
                                <q-btn flat label="Restore" color="negative" @click="restoreSnapshotPrompt[key] = false; selectSnapshot(snapshot)" v-close-popup />
                              </q-card-actions>
                            </q-card>
                          </q-dialog>
                        </template>
                      </q-scroll-area>
                    </q-expansion-item>
                  </th>
                  <!-- Restore status -->
                  <th scope="row" style="padding-bottom: 0; text-align: left;">
                    <q-expansion-item :duration="100" v-model="showRestores" icon="hourglass_empty" label="Get Restore Statuses" style="border: 1px solid black; border-radius: 5px;" @show="loadRestoreStatus()">
                      <p style="padding: 20px; border-bottom: 1px solid black">
                        <b>{{ data.name }}</b> restore history:
                        <q-btn class="infoButton" v-if="!miniState" aria-label="Read more about get snapshots(opens in new tab)" href="https://admin.resources.osu.edu/otdi-web-hosting/dashboard-definitions#get-restore-statuses" target="_blank" round color="negative" size="xs" icon="info" style="margin-left: 5px" />
                      </p>
                      <q-scroll-area style="height: 400px">
                        <table class="bux-table squeezeTable" style="width: 99%">
                          <tbody>
                            <tr v-if="!miniState">
                              <th style="padding: 10px">Date</th>
                              <th>Status</th>
                            </tr>
                            <tr style="display: table-row !important;" v-for="restore in restores">
                              <td style="padding: 10px" scope="row">{{ restore.restore_submitted_time }}</td>
                              <td scope="row">{{ restore.status }}</td>
                            </tr>
                          </tbody>
                        </table>
                      </q-scroll-area>
                    </q-expansion-item>
                  </th>
                </tr>
              </table>
            </q-tab-panel>
            <!-- Rewrite Rules -->
            <q-tab-panel class="tp" name="Rewrite Rules">
              <div class="bux-card">
                <div class="bux-card__content" style="pointer-events: inherit;">
                  <h2 class="bux-card__heading">
                        Rewrite Rules
                        <q-btn class="infoButton" v-if="!miniState" aria-label="Read more about rewrite rules(opens in new tab)" href="https://admin.resources.osu.edu/otdi-web-hosting/dashboard-definitions#rewrite-rules" target="_blank" round color="negative" size="xs" icon="info" style="float: inherit; margin-left: 5px" />
                    </h2>
                  <div class="bux-card__body">
                    <p>This section allows you to include Apache <b>mod_rewrite</b> rules for your site into the primary server configuration file.</p>
                  </div>
                </div>
              </div>
              <!--Rewrite Rules Display Table-->
              <q-tab-panel v-if="data.rewriterules.length == 0" style="padding: 20px; padding-bottom: 0;">
                <h3 class="bux-card__heading">No Rules Created</h3>
                <div class="bux-card__body">
                  <p>Fill in all boxes below and click Add Rewrite Rule.</p>
                </div>
              </q-tab-panel>
              <table v-else aria-label="Regex table" class="bux-table text-dark q-mt-sm squeezeTable responsive-table">
                <thead>
                  <th aria-label="Regex Input">Regex</th>
                  <th aria-label="Redirect Input">Redirect</th>
                  <th aria-label="Flags Input">Flags</th>
                </thead>
                <tbody>
                  <tr v-for="(rule, key) in data.rewriterules">
                    <td data-label="Regex">{{ rule.regex }}</td>
                    <td data-label="Redirect">{{ rule.redirect }}</td>
                    <td data-label="Flags">
                      {{ rule.flags }}
                      <q-btn push style="float: right" :label="`Remove rewrite rule with regex as ${rule.regex}`" class="text-white bg-negative" @click="deleteRewritePrompt[key] = !deleteRewritePrompt[key]">Remove</q-btn>
                    </td>
                    <!-- Delete rewrite prompt -->
                    <q-dialog v-model="deleteRewritePrompt[key]">
                      <q-card>
                        <q-card-section class="row items-center" style="padding-bottom: 5px">
                          <q-avatar icon="warning" color="negative" text-color="white" />
                          <p class="q-ml-sm"><b>This will delete the {{ rule.regex }}
                                                            rule</b>.
                            <br>This action cannot be undone. Are you sure you want to do this?</p>
                        </q-card-section>
                        <q-card-actions align="right">
                          <q-btn flat label="Cancel" color="primary" v-close-popup />
                          <q-btn flat :label="'Delete ' + rule.regex" color="negative" @click="deleteRewritePrompt[key] = false; removeRule(rule)" v-close-popup />
                        </q-card-actions>
                      </q-card>
                    </q-dialog>
                  </tr>
                </tbody>
              </table>
              <hr style="margin-top: 30px">
              <table aria-label="Regex table" class="bux-table text-dark q-mt-sm squeezeTable">
                <p style="padding-left: 1rem !important; color: #C10015">
                  * Mandatory Fields
                </p>
                <tbody>
                  <tr>
                    <td>
                      <q-input filled v-model="rewriteRegex" aria-required="true" label="Enter regex *" @click:append="alert('hi')">
                        <template v-slot:append>
                          <q-btn @mousedown.stop.prevent @touchstart.stop.prevent class="infoButton" v-if="!miniState" aria-label="Read more about the regex (opens in new tab)" @click="dumbOpen('https://admin.resources.osu.edu/otdi-web-hosting/dashboard-definitions#enter-regex')" round color="negative" size="xs" icon="info" />
                        </template>
                      </q-input>
                    </td>
                    <td>
                      <q-input filled v-model="rewriteRedirect" aria-required="true" label="Enter redirect *">
                        <template v-slot:append>
                          <q-btn @mousedown.stop.prevent @touchstart.stop.prevent class="infoButton" v-if="!miniState" aria-label="Read more about the redirect (opens in new tab)" @click="dumbOpen('https://admin.resources.osu.edu/otdi-web-hosting/dashboard-definitions/#enter-redirect')" round color="negative" size="xs" icon="info" />
                        </template>
                      </q-input>
                    </td>
                    <td>
                      <q-input ref="rewriteFlagsRef" filled v-model="rewriteFlags" aria-required="true" label="Enter flags *" :rules="[val => (val[0] == '[' && val[val.length - 1] == ']') || 'Flags must be encapsulated in brackets']" @keydown.enter.prevent="addRule">
                        <template v-slot:append>
                          <q-btn @mousedown.stop.prevent @touchstart.stop.prevent class="infoButton" v-if="!miniState" aria-label="Read more about flags (opens in new tab)" @click="dumbOpen('https://admin.resources.osu.edu/otdi-web-hosting/dashboard-definitions/#enter-flags')" round color="negative" size="xs" icon="info" />
                        </template>
                      </q-input>
                      <q-btn style="width: 100%; margin-top: 10px" class="bg-negative text-white text-center q-mr-sm" @click="addRule()">Add Rewrite Rule</q-btn>
                    </td>
                  </tr>
                </tbody>
              </table>
            </q-tab-panel>
            <!-- Webhooks -->
            <q-tab-panel class="tp" name="Webhooks">
              
                <div class="bux-card">
                  <div class="bux-card__content" style="pointer-events: inherit;">
                    <h3 class="bux-card__heading">Webhooks
                        <q-btn style="margin-left: 5px; float: inherit" class="infoButton" v-if="!miniState" aria-label="Read more about webhooks (opens in new tab)" target="_blank" href="https://admin.resources.osu.edu/otdi-web-hosting/dashboard-definitions#webhooks-01" round color="negative" size="xs" icon="info" />
                    </h3>
                    <div class="bux-card__body">
                      <p>Webhooks allow a website to be linked to a git-based repository so that its various features such as versioning, multiple branches, etc. can be leveraged. We suggest the use of the
                        <a class="text-negative" href="https://code.osu.edu/about/" target="_blank">University Code Repository</a>; however, these should work just as well with Github, etc.</p>
                      <q-expansion-item expand-separator label="Show example" style="border: 1px dashed black; border-radius: 5px; margin-top: 20px">
                        <table style="display: block; overflow-x: scroll !important; white-space: nowrap;" class="bux-table text-dark q-mt-sm">
                          <thead>
                            <th aria-label="Generated URL">Generated URL</th>
                            <th aria-label="Repo URL"> Repo URL</th>
                            <th aria-label="Relative Path">Relative Path</th>
                            <th aria-label="Remote">Remote</th>
                            <th aria-label="Branch">Branch</th>
                            <th aria-label="Key Relative Path">Key Relative Path</th>
                          </thead>
                          <tr>
                            <td aria-label="Generated URL Output">https://site.osu.edu/whwebhook.php?key=randomkey</td>
                            <td aria-label="Repo URL Input"><PRESIDIO_ANONYMIZED_EMAIL_ADDRESS>:name.#/myrepo.git</td>
                            <td aria-label="Relative Path Input">/php-data/myrepo</td>
                            <td aria-label="Remote Input">origin</td>
                            <td aria-label="Branch Input">master</td>
                            <td aria-label="Key Relative Path Input">/php-data/.ssh/id_rsa</td>
                          </tr>
                        </table>
                      </q-expansion-item>
                    </div>
                  </div>
                </div>
              
              <q-expansion-item :duration="100" icon="add" label="Add New Webhook" style="border: 1px solid black; border-radius: 5px; margin-top: 10px">
                <table class="bux-table squeezeTable">
                  <p style="padding-left: 1rem !important; color: #C10015">
                    * Mandatory Fields
                  </p>
                  <tbody>
                    <tr>
                      <th scope="row">
                        <q-btn class="infoButton" v-if="!miniState" href="https://admin.resources.osu.edu/otdi-web-hosting/webhook-setup-between-otdi-websites-and-the-university-code-repository#repourl" target="_blank" round color="negative" size="xs" icon="info" aria-label="Read more about Repo URL (opens in new tab)" alt="Read more about Repo URL (opens in new tab)" />
                        <p>Repo URL *</p>
                      </th>
                      <td>
                        <q-input aria-required="true" aria-label="Enter repo URL" filled v-model="addWebhookRepoText" />
                      </td>
                    </tr>
                    <tr>
                      <th scope="row">
                        <q-btn class="infoButton" v-if="!miniState" href="https://admin.resources.osu.edu/otdi-web-hosting/webhook-setup-between-otdi-websites-and-the-university-code-repository#relativepath" target="_blank" round color="negative" size="xs" icon="info" aria-label="Read more about Relative Path (opens in new tab)" alt="Read more about Relative Path (opens in new tab)" />
                        <p>Relative Path *</p>
                      </th>
                      <td>
                        <q-input aria-required="true" aria-label="Enter relative path" filled v-model="addWebhookRelPathText" />
                      </td>
                    </tr>
                    <tr>
                      <th scope="row">
                        <q-btn class="infoButton" v-if="!miniState" href="https://admin.resources.osu.edu/otdi-web-hosting/webhook-setup-between-otdi-websites-and-the-university-code-repository#remote" target="_blank" round color="negative" size="xs" icon="info" aria-label="Read more about Remote (opens in new tab)" alt="Read more about Remote (opens in new tab)" />
                        <p>Remote *</p>
                      </th>
                      <td>
                        <q-input aria-required="true" aria-label="Enter remote" filled placeholder="origin" v-model="addWebhookRemoteText" />
                      </td>
                    </tr>
                    <tr>
                      <th scope="row">
                        <q-btn class="infoButton" v-if="!miniState" href="https://admin.resources.osu.edu/otdi-web-hosting/webhook-setup-between-otdi-websites-and-the-university-code-repository#branch" target="_blank" round color="negative" size="xs" icon="info" aria-label="Read more about Branch (opens in new tab)" alt="Read more about Branch (opens in new tab)" />
                        <p>Branch *</p>
                      </th>
                      <td>
                        <q-input aria-required="true" aria-label="Enter branch" filled placeholder="master" v-model="addWebhookBranchText" />
                      </td>
                    </tr>
                    <tr>
                      <th scope="row">
                        <q-btn class="infoButton" v-if="!miniState" href="https://admin.resources.osu.edu/otdi-web-hosting/webhook-setup-between-otdi-websites-and-the-university-code-repository#keypath" target="_blank" round color="negative" size="xs" icon="info" aria-label="Read more about Key Relative Path (opens in new tab)" alt="Read more about Key Relative Path (opens in new tab)" />
                        <p>Key Relative Path *</p>
                      </th>
                      <td>
                        <q-input aria-required="true" aria-label="Enter key relative path" filled placeholder="/php-data/.ssh/id_rsa" v-model="addWebhookKRPText" />
                      </td>
                    </tr>
                  </tbody>
                </table>
                <q-btn :aria-label="`Add webhook ${addWebhookRepoText}`" class="q-mt-md q-mr-md justify-center items-center" color="negative" style="margin: 10px;" @click="addWebhook()">Add Webhook</q-btn>
              </q-expansion-item>
              <br>
              <!-- For each webhook, make an info button -->
              <!-- No webhooks display -->
              <q-tab-panel v-if="data.webhooks.length == 0" style="padding: 20px; padding-bottom: 0;">
                <h3 class="bux-card__heading">No Webhooks Created</h3>
                <div class="bux-card__body">
                  <p>Expand <b>Add New Webhook</b> to create one.</p>
                </div>
              </q-tab-panel>
              <table v-else style="table-layout: auto; overflow-x: scroll !important;" class="bux-table text-dark">
                <thead>
                  <th>Webhooks</th>
                  <th>
                    <p></p>
                  </th>
                  <th></th>
                </thead>
                <tbody>
                  <!-- Current webhooks -->
                  <tr v-for="hook in data.webhooks">
                    <td>
                      <!-- If we have a subpath status, AND it's approved -->
                      <template v-if="data.hasOwnProperty('subpathstatus')">
                        <!-- If we have secondary URLs -->
                        <template v-if="data.aliases.length > 0">
                          <p>https://{{ data.aliases[0] }}/whwebhook.php?key={{ hook.key }}</p>
                        </template>
                        <template v-else>
                          <p>You have no secondary URLs. Create one in <a style="cursor: pointer;" v-on:click="changeButton('General')">General</a> first.</p>
                        </template>
                      </template>
                      <template v-else>
                        <p>https://{{ data.servername }}/whwebhook.php?key={{ hook.key }}</p>
                      </template>
                    </td>
                    <td>
                      <q-btn-group push>
                        <q-btn-dropdown color="primary" label="Details">
                          <q-list>
                            <!-- Repo URL -->
                            <q-item v-close-popup>
                              <q-item-section>
                                <q-item-label><b>Repo URL</b>: {{ hook.repo_url }}</q-item-label>
                              </q-item-section>
                            </q-item>
                            <q-item v-close-popup>
                              <q-item-section>
                                <q-item-label><b>Relative Path</b>: {{ hook.repo_relative_path }}</q-item-label>
                              </q-item-section>
                            </q-item>
                            <q-item v-close-popup>
                              <q-item-section>
                                <q-item-label><b>Remote</b>: {{ hook.repo_remote }}</q-item-label>
                              </q-item-section>
                            </q-item>
                            <q-item v-close-popup>
                              <q-item-section>
                                <q-item-label><b>Branch</b>: {{ hook.repo_branch }}</q-item-label>
                              </q-item-section>
                            </q-item>
                            <q-item v-close-popup>
                              <q-item-section>
                                <q-item-label><b>Key Relative Path</b>: {{ hook.sshkey_relative_path }}</q-item-label>
                              </q-item-section>
                            </q-item>
                          </q-list>
                        </q-btn-dropdown>
                        <q-btn push :aria-label="`Remove webhook with url as ${hook.repo_url}`" class="bg-negative text-white" @click="deleteWebhooksPrompt[key] = !deleteWebhooksPrompt[key]">Remove</q-btn>
                        <!-- Delete rewrite prompt -->
                        <q-dialog v-model="deleteWebhooksPrompt[key]">
                          <q-card>
                            <q-card-section class="row items-center" style="padding-bottom: 5px">
                              <q-avatar icon="warning" color="negative" text-color="white" />
                              <p class="q-ml-sm">Hey now... that's quite the button you're about to push!
                              </p>
                            </q-card-section>
                            <q-card-section class="row items-center">
                              <p class="q-ml-sm">
                                You're about to delete an active webhook (<b>#{{ hook.key }}</b>). Ensure nothing is relying on the webhook prior to deletion.
                              </p>
                            </q-card-section>
                            <q-card-actions align="right">
                              <q-btn flat label="Cancel" color="primary" v-close-popup />
                              <q-btn flat label="Delete Webhook" :aria-label="`Delete Webhook with url as ${hook.repo_url}`" color="negative" @click="deleteWebhooksPrompt[key] = false; removeWebhook(hook)" v-close-popup />
                            </q-card-actions>
                          </q-card>
                        </q-dialog>
                      </q-btn-group>
                    </td>
                  </tr>
                </tbody>
              </table>
            </q-tab-panel>
            <!-- SFTP -->
            <q-tab-panel class="tp" name="SFTP">
              <div class="bux-card ">
                <div class="bux-card__content" style="pointer-events: inherit;">
                  <div style="display: flex; justify-content: left;">
                    <h2 class="bux-card__heading">SFTP</h2>
                    <q-btn class="infoButton" v-if="!miniState" href="https://admin.resources.osu.edu/otdi-web-hosting/dashboard-definitions#sftp-01" target="_blank" round color="negative" size="xs" icon="info" style="margin-left: 10px; height:5px;" aria-label="Read more about SFTP (opens in new tab)" />
                  </div>
                  <div class="bux-card__body">
                    <p>This is the list of users who can connect to the website account via SFTP. This allows the addition, removal, and general manipulation of the files on the website. Your web developer is someone who might need SFTP access. Learn how to connect via SFTP using common software solutions <a class="text-negative" href="https://admin.resources.osu.edu/otdi-web-hosting/sftp" target="_blank">here</a>.</p>
                  </div>
                  <!-- Add new Account -->
                  <q-expansion-item :duration="100" icon="library_add" label="Add New SFTP Account" style="border: 1px solid black; border-radius: 5px; user-select: none;" @after-show="this.$refs.sftpRef.focus()">
                    <table class="bux-table squeezeTable">
                      <p style="padding-left: 1rem !important; color: #C10015">
                        * Mandatory Fields
                      </p>
                      <tbody>
                        <tr>
                          <th scope="row">Username (name.#) *</th>
                          <td>
                            <q-input filled ref="sftpRef" v-model="addSFTPUserText" aria-required="true" aria-label="name.#" />
                          </td>
                        </tr>
                        <tr>
                          <th scope="row">chroot *
                            <q-btn class="infoButton" v-if="!miniState" aria-label="Read more about sftp add (opens in new tab)" href="https://admin.resources.osu.edu/otdi-web-hosting/dashboard-definitions#add-new-sftp-account-username" target="_blank" round color="negative" size="xs" icon="info" style="margin-left: 5px" />
                          </th>
                          <td>
                            <q-input filled v-model="addSFTPchrootText" @keydown.enter.prevent="addSFTPUser" aria-required="true" aria-label="chroot" />
                          </td>
                        </tr>
                      </tbody>
                    </table>
                    <q-btn class="q-mt-md q-mr-md justify-center items-center" color="negative" style="margin: 10px;" @click="addSFTPUser">Add Account</q-btn>
                  </q-expansion-item>
                </div>
              </div>
              <br>
              <table v-if="data.ftplogins.length != 0" class="bux-table">
                <thead>
                  <tr>
                    <th scope="Database">Name.#</th>
                    <th scope="Description">chroot</th>
                    <th scope="Remove"></th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="(user, key) in data.ftplogins">
                    <!-- Account -->
                    <td>
                      <p><b>{{ user.login }}</b></p>
                    </td>
                    <!-- Chroot -->
                    <td>
                      <p><b>{{ user.chroot }}</b></p>
                    </td>
                    <!-- Remove -->
                    <td>
                      <q-btn push  :aria-label="`Remove user - ${user.login}`" class="bg-negative text-white text-center" @click="deleteSFTPPrompt[key] = !deleteSFTPPrompt[key]">Delete</q-btn>
                      <!-- Delete rewrite prompt -->
                      <q-dialog v-model="deleteSFTPPrompt[key]">
                        <q-card>
                          <q-card-section class="row items-center" style="padding-bottom: 5px">
                            <q-avatar icon="warning" color="negative" text-color="white" />
                            <p class="q-ml-sm">Remove SFTP access for <b>{{ user.login }}</b>?</p>
                          </q-card-section>
                          <q-card-actions align="right">
                            <q-btn flat label="Cancel" color="primary" v-close-popup />
                            <q-btn flat :label="'Delete ' + user.login" color="negative" @click="deleteSFTPPrompt[key] = false; removeUser(user.login)" v-close-popup />
                          </q-card-actions>
                        </q-card>
                      </q-dialog>
                    </td>
                  </tr>
                </tbody>
              </table>
              <q-tab-panel v-else style="padding: 20px; padding-bottom: 0;">
                <h3 class="bux-card__heading">No SFTP Users</h3>
                <div class="bux-card__body">
                  <p>Expand <b>Add New SFTP Account</b> to create one.</p>
                </div>
              </q-tab-panel>
            </q-tab-panel>
            <!-- SFTP SVC -->
            <q-tab-panel class="tp" name="SFTP SVC">
              <div class="bux-card">
                <div class="bux-card__content" style="pointer-events: inherit;">
                  <div style="display: flex; justify-content: left;">
                    <h2 class="bux-card__heading">SFTP SVC</h2>
                    <q-btn class="infoButton" v-if="!miniState" href="https://admin.resources.osu.edu/otdi-web-hosting/dashboard-definitions#sftp-svc" target="_blank" round color="negative" size="xs" icon="info" style="margin-left: 10px; height:5px;" aria-label="Read more about SFTP (opens in new tab)" />
                  </div>
                  <div class="bux-card__body">
                    This is the list of SFTP Service Accounts. Service accounts are <b>not</b> for individual or contractor use. Any individual person needing SFTP access must have a name.#.
                  </div>
                  <!-- Add new Account -->
                  <q-expansion-item :duration="100" icon="library_add" label="Add New SFTP SVC Account" style="border: 1px solid black; border-radius: 5px; user-select: none;" @after-show="this.$refs.sftpSVC.focus()">
                    <table class="bux-table squeezeTable">
                      <tbody>
                        <tr>
                          <th scope="row">
                            Username (name.#)*
                          </th>
                          <td>
                            <q-input ref="sftpSVC" filled v-model="addSFTPSVCUserText" aria-label="user name" />
                          </td>
                        </tr>
                        <tr>
                          <th scope="row">
                            chroot*
                            <q-btn class="infoButton" v-if="!miniState" aria-label="Read more about sftp add (opens in new tab)" href="https://admin.resources.osu.edu/otdi-web-hosting/dashboard-definitions#add-new-sftp-account-username" target="_blank" round color="negative" size="xs" icon="info" style="margin-left: 5px" />
                          </th>
                          <td>
                            <q-input filled v-model="addSFTPSVCchrootText" @keydown.enter.prevent="addSFTPSVCUser" aria-label="chroot" />
                          </td>
                        </tr>
                      </tbody>
                    </table>
                    <q-btn class="q-mt-md q-mr-md justify-center items-center" color="negative" style="margin: 10px;" @click="addSFTPSVCUser">Add Account</q-btn>
                  </q-expansion-item>
                </div>
              </div>
              <br>
              <table v-if="data.nkftplogins != 0" class="bux-table">
                <thead>
                  <tr>
                    <th scope="Database">SVC Account</th>
                    <th scope="Description">chroot</th>
                    <th scope="Remove"></th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="(user, key) in data.nkftplogins">
                    <!-- Account -->
                    <td>
                      <p><b>{{ user.login }}</b></p>
                    </td>
                    <!-- Chroot -->
                    <td>
                      <p><b>{{ user.chroot }}</b></p>
                    </td>
                    <!-- Remove -->
                    <td>
                      <q-btn push class="bg-negative text-white text-center" @click="deleteSFTPSVCPrompt[key] = !deleteSFTPSVCPrompt[key]">Delete</q-btn>
                    </td>
                    <!-- Delete rewrite prompt -->
                    <q-dialog v-model="deleteSFTPSVCPrompt[key]">
                      <q-card>
                        <q-card-section class="row items-center" style="padding-bottom: 5px">
                          <q-avatar icon="warning" color="negative" text-color="white" />
                          <p class="q-ml-sm">Remove SFTP SVC access for <b>{{ user.login }}</b>?</p>
                        </q-card-section>
                        <q-card-actions align="right">
                          <q-btn flat label="Cancel" color="primary" v-close-popup />
                          <q-btn flat :label="'Delete ' + user.login" color="negative" @click="deleteSFTPSVCPrompt[key] = false; removeSVCAcc(user.login)" v-close-popup />
                        </q-card-actions>
                      </q-card>
                    </q-dialog>
                  </tr>
                </tbody>
              </table>
              <q-tab-panel v-else style="padding: 20px; padding-bottom: 0;">
                <h3 class="bux-card__heading">No SFTP SVC Users</h3>
                <div class="bux-card__body">
                  <p>Expand <b>Add New SFTP SVC Account</b> to create one.</p>
                </div>
              </q-tab-panel>
            </q-tab-panel>
            <!-- Shell -->
            <q-tab-panel class="tp" name="Shell">
              <div class="bux-card">
                <div class="bux-card__content" style="pointer-events: inherit;">
                  <h2 class="bux-card__heading">
                    Shell
                    <q-btn class="infoButton" v-if="!miniState" aria-label="Read more about shell (opens in new tab)" href="https://admin.resources.osu.edu/otdi-web-hosting/dashboard-definitions#shell-01" target="_blank" round color="negative" size="xs" icon="info" style="float: inherit; margin-left: 5px" />
                </h2>
                  <div class="bux-card__body">
                    <p>Users listed in this section are allowed to connect directly to the Web Hosting system via an SSH shell. This is the highest level of access and should be limited only to power users with UNIX / Linux familiarity that cannot do what they need to do via SFTP alone. Instructions for use can be found <a href="https://admin.resources.osu.edu/otdi-web-hosting/shell-access" target="_blank" style="color: #C10015;">here</a>.</p>
                  </div>
                  <!-- Add new Shell User -->
                  <q-expansion-item :duration="100" icon="library_add" label="Add New Shell User" style="border: 1px solid black; border-radius: 5px; user-select: none;" @after-show="this.$refs.shellRef.focus()">
                    <table class="bux-table squeezeTable">
                      <tbody>
                        <tr>
                          <th scope="row">Username (name.#)*</th>
                          <td>
                            <q-input filled ref="shellRef" v-model="addSUserText" @keydown.enter.prevent="addSUser" aria-label="user name" />
                          </td>
                        </tr>
                      </tbody>
                    </table>
                    <q-btn class="q-mt-md q-mr-md justify-center items-center" color="negative" style="margin: 10px;" @click="addSUser()">Add Account</q-btn>
                  </q-expansion-item>
                </div>
              </div>
              <br>
              <table v-if="data.shelllogins != 0" class="bux-table">
                <thead>
                  <tr>
                    <th>Name.#</th>
                    <th></th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="(user, key) in data.shelllogins">
                    <td>
                      <p><b>{{ user.login }}</b></p>
                    </td>
                    <td>
                      <q-btn push class="text-white bg-negative text-center" @click="deleteShellPrompt[key] = !deleteShellPrompt[key]">Delete</q-btn>
                      <!-- Delete rewrite prompt -->
                      <q-dialog v-model="deleteShellPrompt[key]">
                        <q-card>
                          <q-card-section class="row items-center" style="padding-bottom: 5px">
                            <q-avatar icon="warning" color="negative" text-color="white" />
                            <p class="q-ml-sm">Remove shell access for <b>{{ user.login }}</b>?</p>
                          </q-card-section>
                          <q-card-actions align="right">
                            <q-btn flat label="Cancel" color="primary" v-close-popup />
                            <q-btn flat :label="'Delete ' + user.login" color="negative" @click="deleteShellPrompt[key] = false; removeShellUser(user.login)" v-close-popup />
                          </q-card-actions>
                        </q-card>
                      </q-dialog>
                    </td>
                  </tr>
                </tbody>
              </table>
              <q-tab-panel v-else style="padding: 20px; padding-bottom: 0;">
                <h3 class="bux-card__heading">No Shell Users</h3>
                <div class="bux-card__body">
                  <p>Expand <b>Add New Shell User</b> to create one.</p>
                </div>
              </q-tab-panel>
            </q-tab-panel>
            <!-- Admins options -->
            <q-tab-panel class="tp" name="Admins">
              <div class="bux-card">
                <div class="bux-card__content" style="pointer-events: inherit;">
                  <div style="display: flex; justify-content: left;">
                    <h2 class="bux-card__heading">Admins</h2>
                    <q-btn class="infoButton" v-if="!miniState" href="https://admin.resources.osu.edu/otdi-web-hosting/dashboard-definitions#admins-01" target="_blank" round color="negative" size="xs" icon="info" style="margin-left: 10px; height:5px;" aria-label="Read more about Admins (opens in new tab)" />
                  </div>
                  <div class="bux-card__body">
                    <p>Admins have access to make almost <b>any</b> change to a website account available. The one exception is that they cannot change the site manager or affect their access. If a change needs to be made to the site manager, please <a href="https://admin.resources.osu.edu/otdi-web-hosting#help" target="_blank" style="color: #C10015;">contact us</a> for assistance.</p>
                  </div>
                  <!-- Add new Admin -->
                  <q-expansion-item :duration="100" icon="library_add" label="Add New Admin" style="border: 1px solid black; border-radius: 5px; user-select: none;" @after-show="this.$refs.adminRef.focus()">
                    <table class="bux-table squeezeTable">
                      <tbody>
                        <tr>
                          <th scope="row">Username (name.#)*</th>
                          <td>
                            <q-input filled ref="adminRef" v-model="addAdminUserText" @keydown.enter.prevent="addAdminUser" aria-label="user name" />
                          </td>
                        </tr>
                      </tbody>
                    </table>
                    <q-btn class="q-mt-md q-mr-md justify-center items-center" color="negative" style="margin: 10px;" @click="addAdminUser">Add Admin</q-btn>
                  </q-expansion-item>
                </div>
              </div>
              <br>
              <table v-if="data.siteadmins != 0" class="bux-table">
                <thead>
                  <tr>
                    <th>Name.#</th>
                    <th></th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td>
                      <p><b>{{ data.manager }}</b></p>
                    </td>
                    <td>
                      <p>Manager cannot be removed</p>
                      <!-- Delete rewrite prompt -->
                      <q-dialog v-model="deleteAdminsPrompt[key]">
                        <q-card>
                          <q-card-section class="row items-center" style="padding-bottom: 5px">
                            <q-avatar icon="warning" color="negative" text-color="white" />
                            <p class="q-ml-sm">Remove admin access for <b>{{ admin.ident }}</b>?</p>
                          </q-card-section>
                          <q-card-actions align="right">
                            <q-btn flat label="Cancel" color="primary" v-close-popup />
                            <q-btn flat :label="'Delete ' + admin.ident" color="negative" @click="deleteAdminsPrompt[key] = false; removeAdminUser(admin.ident)" v-close-popup />
                          </q-card-actions>
                        </q-card>
                      </q-dialog>
                    </td>
                  </tr>
                  <template v-for="(admin, key) in data.siteadmins">
                    <tr v-if="admin.ident != data.manager">
                      <td>
                        <p><b>{{ admin.ident }}</b></p>
                      </td>
                      <td>
                        <q-btn push color="text-white bg-negative text-center" @click="deleteAdminsPrompt[key] = !deleteAdminsPrompt[key]">
                          Delete
                        </q-btn>
                        <!-- Delete rewrite prompt -->
                        <q-dialog v-model="deleteAdminsPrompt[key]">
                          <q-card>
                            <q-card-section class="row items-center" style="padding-bottom: 5px">
                              <q-avatar icon="warning" color="negative" text-color="white" />
                              <p class="q-ml-sm">Remove admin access for <b>{{ admin.ident }}</b>?</p>
                            </q-card-section>
                            <q-card-actions align="right">
                              <q-btn flat label="Cancel" color="primary" v-close-popup />
                              <q-btn flat :label="'Delete ' + admin.ident" color="negative" @click="deleteAdminsPrompt[key] = false; removeAdminUser(admin.ident)" v-close-popup />
                            </q-card-actions>
                          </q-card>
                        </q-dialog>
                      </td>
                    </tr>
                  </template>
                </tbody>
              </table>
              <q-tab-panel v-else style="padding: 20px; padding-bottom: 0;">
                <h3 class="bux-card__heading">No Admins</h3>
                <div class="bux-card__body">
                  <p>Expand <b>Add New Admin</b> to create one.</p>
                </div>
              </q-tab-panel>
            </q-tab-panel>
            <!-- Billing -->
            <q-tab-panel class="tp" name="Billing">
              <table class="bux-table squeezeTable">
                <tbody>
                  <tr>
                    <th scope="row">Name</th>
                    <td>
                      <p>{{ data.name }}</p>
                    </td>
                  </tr>
                  <tr>
                    <th scope="row">Description</th>
                    <td>
                      <p>{{ data.description }}</p>
                    </td>
                  </tr>
                  <tr>
                    <th scope="row">Owned By</th>
                    <td>
                      <p>{{ data.ci.owned_by }}</p>
                    </td>
                  </tr>
                  <tr>
                    <th scope="row">Status</th>
                    <td>
                      <p>{{ data.ci.install_status }}</p>
                    </td>
                  </tr>
                  <!--    OLD STATS
                                    <tr>
                                        <th scope="row">Org</th>
                                        <td v-if="data.ci.u_organization"> {{ data.ci.u_organization }}</td>
                                        <td v-if="!data.ci.u_organization">N/A</td>
                                    </tr>
                                    <tr>
                                        <th scope="row">Fund</th>
                                        <td v-if="data.ci.u_fund"> {{ data.ci.u_fund }}</td>
                                        <td v-if="!data.ci.u_fund">N/A</td>
                                    </tr>
                                    -->
                  <tr>
                    <th scope="row">Classification</th>
                    <td>
                      <p>{{ data.ci.u_classification }}</p>
                    </td>
                  </tr>
                  <tr>
                    <th scope="row">Primary URL</th>
                    <td>
                      <p><a :href="data.ci.u_primary_url" target="_blank" class="button-link text-left">{{ data.ci.u_primary_url
                                                }}</a></p>
                    </td>
                  </tr>
                  <tr>
                    <th scope="row">Tier</th>
                    <td>
                      <q-select v-if="isSuper" outlined v-model="data.tier_rank" label="Select tier..." :options="['Core', 'Premium', 'Standard', 'Download', 'Mobile']" @update:model-value="saveData()" />
                      <q-select v-else outlined disable readonly v-model="data.tier_rank" label="Select tier..." :options="['Core', 'Premium', 'Standard', 'Download', 'Mobile']" @update:model-value="saveData()" />
                    </td>
                  </tr>
                  <tr v-if="isSuper">
                    <th scope="row">
                      <q-icon name="warning" size="1.3em" style="padding-right: 0.3em" />Nuclear Options</th>
                    <td>
                      <table class="align-table" style="border-collapse: separate; border-spacing: 1rem;">
                        <tr>
                          <td style="width: 50%">
                            <p>Decommissioning or deleting a site does <b>NOT</b> stop the billing. A Service Now ticket must be submitted to OTDI Billing to have the billing turned off.</p>
                          </td>
                          <td style="width: 50%">
                            <q-btn push :color="data.serverstatus ? `negative` : `primary`" @click="decommissionPrompt = !decommissionPrompt">{{ (data.serverstatus ? "Decommission" : "Recommission") + " site" }}
                            </q-btn>
                          </td>
                        </tr>
                        <tr>
                          <td>
                            <p><b>The nuclear option</b>. This instance will be permanently deleted. You cannot undo this action.</p>
                          </td>
                          <td>
                            <q-btn push color="red" @click="deleteSitePrompt = !deleteSitePrompt">Delete {{ data.name }}</q-btn>
                          </td>
                        </tr>
                      </table>
                    </td>
                  </tr>
                </tbody>
              </table>
              <!-- Decommission / Recomission -->
              <q-dialog v-model="decommissionPrompt">
                <q-card>
                  <!-- Decomission prompt -->
                  <template v-if="data.serverstatus">
                    <q-card-section class="row items-center" style="padding-bottom: 5px">
                      <q-avatar icon="warning" color="negative" text-color="white" />
                      <p class="q-ml-sm">Hey now... that's quite the button you're about to push!
                      </p>
                    </q-card-section>
                    <q-card-section class="row items-center">
                      <p class="q-ml-sm"><b>{{ data.name }} will be deleted and inaccessible after 30
                                                    days.</b>
                        <br>If you change your mind, you can recommission the site anytime here.
                      </p>
                    </q-card-section>
                  </template>
                  <!-- Recomission prompt -->
                  <template v-else>
                    <q-card-section class="row items-center" style="padding-bottom: 5px">
                      <q-avatar icon="refresh" color="primary" text-color="white" />
                      <p class="q-ml-sm">Welcome back!</p>
                    </q-card-section>
                    <q-card-section class="row items-center">
                      <p class="q-ml-sm">You're about to recommission {{ data.name }}.
                        <br>This will stop the 30 day deletion countdown.</p>
                    </q-card-section>
                  </template>
                  <!-- Buttons -->
                  <q-card-actions align="right">
                    <q-btn flat label="Cancel" color="primary" v-close-popup />
                    <q-btn flat :label="data.serverstatus ? `Decommission` : `Recomission`" :color="data.serverstatus ? `negative` : `green`" @click="decommissionPrompt = false; commissionSite()" v-close-popup />
                  </q-card-actions>
                </q-card>
              </q-dialog>
              <!-- Delete site prompt -->
              <q-dialog v-model="deleteSitePrompt">
                <!-- "You can't do that" - :nerd: -->
                <q-card v-if="!isSuper">
                  <q-card-section class="row items-center" style="padding-bottom: 5px">
                    <q-avatar icon="cancel" color="negative" text-color="white" />
                    <p class="q-ml-sm">You do not have proper authority for this.</p>
                  </q-card-section>
                  <q-card-section class="row items-center">
                    <p class="q-ml-sm">Contact an admin about deleting {{ data.name }}.
                      <br>You can decommission the site instead.</p>
                  </q-card-section>
                  <q-card-actions align="right">
                    <q-btn flat label="Cancel" color="primary" v-close-popup />
                  </q-card-actions>
                </q-card>
                <!-- If there's still databases remaining -->
                <q-card v-else-if="data.dbs && data.dbs.length > 0">
                  <q-card-section class="row items-center" style="padding-bottom: 5px">
                    <q-avatar icon="error" color="warning" text-color="white" />
                    <p class="q-ml-sm">You need to manually delete all databases before you delete the instance.</p>
                  </q-card-section>
                  <q-card-actions align="right">
                    <q-btn flat label="Cancel" color="primary" v-close-popup />
                    <q-btn flat label="Go to Databases" color="primary" @click="deleteSitePrompt = false; changeButton('Databases')" />
                  </q-card-actions>
                </q-card>
                <q-card v-else>
                  <q-card-section class="row items-center" style="padding-bottom: 5px">
                    <q-avatar icon="warning" color="warning" text-color="white" />
                    <p class="q-ml-sm">You're about to delete the entire instance.</p>
                  </q-card-section>
                  <q-card-section class="row items-center">
                    <p class="q-ml-sm">Ensure all essential data has been safely migrated.</p>
                  </q-card-section>
                  <q-card-actions align="right">
                    <q-btn flat label="Cancel" color="primary" v-close-popup />
                    <q-btn flat label="I understand" color="negative" @click="deleteSitePrompt = false; lastChancePrompt = !lastChancePrompt" v-close-popup />
                  </q-card-actions>
                </q-card>
              </q-dialog>
              <!-- The actual delete prompt -->
              <q-dialog v-model="lastChancePrompt">
                <q-card>
                  <q-card-section class="row items-center" style="padding-bottom: 5px">
                    <q-avatar icon="warning" color="negative" text-color="white" />
                    <p class="q-ml-sm"><b>This is the final warning.</b></p>
                  </q-card-section>
                  <q-card-section class="row items-center">
                    <p class="q-ml-sm">You're about to delete {{ data.name }}.
                      <br><b>This action cannot be undone. Are you sure you want
                                                to do this?</b></p>
                  </q-card-section>
                  <q-card-actions align="right">
                    <q-btn flat label="Cancel" color="primary" v-close-popup />
                    <q-btn flat :label="'Goodbye ' + data.name" color="negative" @click="lastChancePrompt = false; deleteSite()" v-close-popup />
                  </q-card-actions>
                </q-card>
              </q-dialog>
            </q-tab-panel>
          </q-tab-panels>
          <!-- END CONTENT -->
        </q-card>
        <!-- Loading overlay -->
        <q-inner-loading :showing="!loaded" label="Please wait...">
        </q-inner-loading>
      </q-page-container>
    </q-layout>
  
x-invalid-end-tag