<div class="jdrupes-vmoperator-vmmgmt jdrupes-vmoperator-vmmgmt-view"
  data-jgwc-on-load="orgJDrupesVmOperatorVmMgmt.initView"
  data-jgwc-on-unload="JGConsole.jgwc.unmountVueApps"
  data-conlet-resource-base="${conletResource('')}">
  <div class="jdrupes-vmoperator-vmmgmt-view-search">
    <form>
      <label class="form__label--horizontal">
        <span>{{ localize("Filter") }}</span>
        <input type="text" class="form__input-text--with-remove" 
          v-on:input="controller.updateFilter($event)">
        <span role="button" tabindex="0" class="fa fa-remove" 
          v-on:click="controller.clearFilter($event)"></span>
      </label>
    </form>
  </div>
  <table 
    class="table--basic--striped jdrupes-vmoperator-vmmgmt-view-table">
    <thead>
      <tr>
        <th v-for="key in controller.keys"
          class="sortable" v-on:click="controller.sortBy(key)">
          {{ localize(controller.label(key)) }}<span v-if="controller.sortedByAsc(key)"
            role="button" tabindex="0">&#x25B2;</span><span
            v-if="controller.sortedByDesc(key)" role="button" 
            tabindex="0">&#x25BC;</span>
        </th>
        <th>
          {{ localize("vmActions") }}
        </th>
      </tr>
    </thead>
    <tbody>
      <template v-for="(entry, rowIndex) in filteredData">
        <tr :class="[(rowIndex % 2) ? 'odd' : 'even']"
          :aria-expanded="(entry.name in detailsByName) ? 'true' : 'false'">
          <td v-for="key in controller.keys" 
            v-bind:class="'column-' + key"
            v-bind:title="key == 'name' ? entry['name'] : null"
            v-bind:rowspan="(key == 'name') && $aash.isDisclosed(scopedId(rowIndex)) ? 2 : false">
            <aash-disclosure-button v-if="key === 'name'" :type="'div'"
              :id-ref="scopedId(rowIndex)">
              <span v-html="controller.breakBeforeDots(entry[key])"></span>
            </aash-disclosure-button>
            <span v-else-if="key === 'running' && entry[key]"
              class="fa fa-check" :title="localize('Yes')"></span>
            <span v-else-if="key === 'running' && !entry[key]"
              class="fa fa-close" :title="localize('No')"></span>
            <span v-else-if="key === 'runningConditionSince'"
              >{{ shortDateTime(entry[key].toString()) }}</span>
            <span v-else-if="key === 'currentRam'"
              >{{ formatMemory(entry[key]) }}</span>
            <span v-else-if="key === 'usedBy'"
              :class="{ 'console-conection-closed' : !entry.usedFrom }"
              :title="entry.usedFrom ? localize('usedFrom') 
                + ' ' + entry.usedFrom : localize('notInUse')"
              v-html="controller.breakBeforeDots(entry[key])"></span>
            <span v-else
              v-html="controller.breakBeforeDots(entry[key])"></span>
          </td>
          <td class="jdrupes-vmoperator-vmmgmt-view-action-list">
            <span role="button" 
              v-if="entry.spec.vm.state != 'Running' && !entry['running']
                && entry.permissions.includes('START')" 
              tabindex="0" class="fa fa-play" :title="localize('Start VM')"
              v-on:click="vmAction(entry.name, 'start')"></span>
            <span role="button" v-else class="fa fa-play"
              aria-disabled="true" :title="localize('Start VM')"></span>
            <span role="button"
              v-if="entry.spec.vm.state != 'Stopped' && entry['running']
                && entry.permissions.includes('STOP')" 
              tabindex="0" class="fa fa-stop" :title="localize('Stop VM')"
              v-on:click="vmAction(entry.name, 'stop')"></span>
            <span role="button" v-else class="fa fa-stop"
              aria-disabled="true" :title="localize('Stop VM')"></span>
            <span role="button"
              :aria-disabled="!entry['running'] 
                || !entry.permissions.includes('RESET')" 
              tabindex="0" class="svg-icon" :title="localize('Reset VM')"
              v-on:click="vmAction(entry.name, 'reset')">
              <svg viewBox="0 0 1541.33 1535.5083">
                <path d="m 0,127.9968 v 448 c 0,35 29,64 64,64 h 448 c 35,0 64,-29 64,-64 0,-17 -6.92831,-33.07213 -19,-45 C 264.23058,241.7154 337.19508,314.89599 109,82.996795 c -11.999999,-12 -28,-19 -45,-19 -35,0 -64,29 -64,64.000005 z" />
                <path d="m 772.97656,1535.5046 c 117.57061,0.3623 236.06134,-26.2848 345.77544,-81.4687 292.5708,-147.1572 459.8088,-465.37411 415.5214,-790.12504 C 1489.9861,339.15993 1243.597,77.463924 922.29883,14.342498 601.00067,-48.778928 274.05699,100.37563 110.62891,384.39133 c -34.855139,60.57216 -14.006492,137.9313 46.5664,172.78516 60.57172,34.85381 137.92941,14.00532 172.78321,-46.56641 109.97944,-191.12927 327.69604,-290.34657 543.53515,-247.94336 215.83913,42.40321 380.18953,216.77543 410.00973,435.44141 29.8203,218.66598 -81.8657,430.94957 -278.4863,529.84567 -196.6206,98.8962 -432.84043,61.8202 -589.90233,-92.6777 -24.91016,-24.5038 -85.48587,-83.3326 -119.02246,-52.9832 -24.01114,21.7292 -35.41741,29.5454 -59.9209,54.4559 -24.50381,24.9102 -35.33636,36.9034 -57.54543,60.4713 -38.1335,40.4667 34.10761,93.9685 59.01808,118.472 145.96311,143.5803 339.36149,219.2087 535.3125,219.8125 z"/>
              </svg>
            </span>
            <img role="button" :src="resourceBase + (!entry['running'] 
              ? 'computer-off.svg' : (entry.usedFrom 
                ? 'computer-in-use.svg' : 'computer.svg'))"
              :title="localize('Open console')" 
              :aria-disabled="!entry.consoleAccessible"
              v-on:click="vmAction(entry.name, 'openConsole')">
          </td>
        </tr>
        <tr :id="scopedId(rowIndex)" v-if="$aash.isDisclosed(scopedId(rowIndex))"
          :class="[(rowIndex % 2) ? 'odd' : 'even']">
          <td colspan="8" class="details">
            <table class="table--basic table--basic--autoStriped">
              <tr>
                <td>{{ localize("maximumCpus") }}</td>
                <td>{{ maximumCpus(entry) }}</td>
              </tr>
              <tr>
                <td>{{ localize("requestedCpus") }}</td>
                <td v-if="cic.key !== (entry['name'] + ':cpus')" tabindex="0"
                   v-on:focus="cic.startEdit(entry['name'] + ':cpus', entry.spec.vm.currentCpus)"
                  >{{ entry.spec.vm.currentCpus }}</td>
                <td v-else><form action="javascript:void();"
                  ><input :ref="(el) => { cic.input = el; }"
                   type="number" required :max="entry.spec.vm.maximumCpus"
                   v-on:focusout="cic.endEdit(cic.parseNumber)"
                   v-on:keydown.escape="cic.endEdit()"
                  ><span>{{ cic.error }}</span></form></td>
              </tr>
              <tr>
                <td>{{ localize("maximumRam") }}</td>
                <td>{{ formatMemory(Number(entry.spec.vm.maximumRam)) }}</td>
              </tr>
              <tr>
                <td>{{ localize("requestedRam") }}</td>
                <td v-if="cic.key !== (entry['name'] + ':ram')" tabindex="0"
                   v-on:focus="cic.startEdit(entry['name'] + ':ram', formatMemory(entry.spec.vm.currentRam))"
                >{{ formatMemory(entry.spec.vm.currentRam) }}</td>
                <td v-else><form action="javascript:void(0);"
                  ><input :ref="(el) => { cic.input = el; }"
                   type="text" required
                   v-on:focusout="cic.endEdit(parseMemory)"
                   v-on:keydown.escape="cic.endEdit()"
                  ><span>{{ cic.error }}</span></form></td>
              </tr>
            </table>
            <table class="table--basic table--basic--autoStriped">
              <tr>
                <td colspan="2">{{ entry.status?.osinfo?.["pretty-name"] || "" }}</td>
              </tr>
              <tr>
                <td>{{ localize("usedFrom") }}</td>
                <td>{{ entry.usedFrom }}</td>
              </tr>
            </table>
          </td>
        </tr>
      </template>
    </tbody>
  </table>
</div>
