<commit_before>.grid
  .panel.panel-default
    p.page-title
      i.xo-icon-vm(ng-if="isVMWorking(VM)", class="xo-color-pending", tooltip="{{VM.power_state}} and {{values(VM.current_operations)[0]}}")
      i.xo-icon-vm(class="xo-color-{{VM.power_state | lowercase}}",ng-if="!isVMWorking(VM)", tooltip="{{VM.power_state}}")
      |  {{VM.name_label}}
.grid
  .panel.panel-default
    .panel-heading.panel-title
      i.fa.fa-cogs(style="color: #e25440;")
      |  General
      span.quick-edit(tooltip="Edit General settings", ng-click="vmSettings.$show()")
        i.fa.fa-edit.fa-fw
    .panel-body
      form(editable-form="", name="vmSettings", onbeforesave="saveVM($data)")
        dl.dl-horizontal
          dt Name
          dd
            span(editable-text="VM.name_label", e-name="name_label", e-form="vmSettings")
              | {{VM.name_label}}
          dt Description
          dd
            span(editable-text="VM.name_description", e-name="name_description", e-form="vmSettings")
              | {{VM.name_description}}
          dt(ng-if="VM.power_state == ('Running' || 'Paused')") Running on:
          dt(ng-if="VM.power_state == ('Halted')") Resident on:
          dd(ng-repeat="container in [VM.$container] | resolve")
            span(ng-if = 'container.type === "host"')
              a(xo-sref="hosts_view({id: container.UUID})")
                | {{container.name_label}}
              small
                span(ng-if="(container.poolRef | resolve).name_label")
                  | (
                  a(ui-sref="pools_view({id: (container.poolRef | resolve).UUID})") {{(container.poolRef | resolve).name_label}}
                  | )
            a(
              ng-if = 'container.type === "pool"'
              xo-sref="pools_view({id: container.UUID})"
            )
              | {{container.name_label}}
          dt(ng-if="VM.addresses") Address
          dd(ng-repeat="IP in VM.addresses") {{IP}}
          dt(ng-if="!(VM.poolRef | resolve).HA_enabled") Auto Power
          dd(ng-if="!(VM.poolRef | resolve).HA_enabled")
            span(
              editable-checkbox="VM.auto_poweron"
              e-name="auto_poweron"
              e-form="vmSettings"
            )
              | {{VM.auto_poweron}}
          dt(ng-if="(VM.poolRef | resolve).HA_enabled") HA
          dd(ng-if="(VM.poolRef | resolve).HA_enabled")
            span(
              editable-checkbox="VM.high_availability"
              e-name="high_availability"
              e-form="vmSettings"
            )
              | {{VM.high_availability}}
          dt vCPUs
          dd
            span(
              editable-text="VM.CPUs.number"
              e-name="CPUs"
              e-form="vmSettings"
            )
              | {{VM.CPUs.number}}
          dt RAM
          dd
            span(
              editable-text="memorySize"
              e-name="memory"
              e-form="vmSettings"
            )
              | {{memorySize}}
          dt UUID
          dd {{VM.UUID}}
          dt(ng-if="refreshStatControl.running && stats") Xen tools:
          dd(ng-if="refreshStatControl.running && stats")
            span(ng-if="VM.PV_drivers", style="color:green;") Installed
            span(ng-if="!VM.PV_drivers") NOT installed
          dt(ng-if="refreshStatControl.running && stats && VM.os_version.distro") OS:
          dd(ng-if="refreshStatControl.running && stats && VM.os_version.distro")
            | {{VM.os_version.name}} ({{VM.os_version.distro}})
          dt(ng-if="refreshStatControl.running && stats && VM.os_version.uname") Kernel:
          dd(ng-if="refreshStatControl.running && stats && VM.os_version.uname")
            | {{VM.os_version.uname}}
          dt(ng-if="VM.docker") Docker:
          dd(ng-if="!VM.docker.enabled") {{VM.docker.enabled}}
            span(
              editable-checkbox="VM.docker.enabled"
              e-name="enabled"
              e-form="vmSettings"
            )
          dd(ng-if="VM.docker.enabled") {{VM.docker.version.Version}} (API: {{VM.docker.version.ApiVersion}})
        .btn-form(ng-show="vmSettings.$visible")
          p.center
            button.btn.btn-default(
              type="button"
              ng-disabled="vmSettings.$waiting"
              ng-click="vmSettings.$cancel()"
            )
              i.fa.fa-times
              |  Cancel
            | &nbsp;
            button.btn.btn-primary(
              type="submit"
              ng-disabled="vmSettings.$waiting"
            )
              i.fa.fa-save
              |  Save

  .panel.panel-default.panel-height.center
    .panel-heading.panel-title
      i.xo-icon-stats(style="color: #e25440;", xo-click="refreshStats(VM.UUID)")
      |  Stats
    .panel-body-stats(ng-if="refreshStatControl.running && stats")
      div(ng-if="statView.cpuOnly", ng-click="statView.cpuOnly = false")
        p.stat-name
          i.fa.fa-tachometer
          | &nbsp; CPU usage
        canvas.chart.chart-line.chart-stat-full(
          id="bigCpu"
          data="stats.cpus"
          labels="stats.date"
          series="stats.cpuSeries"
          colours="['#0000ff', '#9999ff', '#000099', '#5555ff', '#000055']"
          legend="true"
          options='{responsive: true, maintainAspectRatio: false, tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= Math.round(10*value)/10 %>", multiTooltipTemplate:"<%if (datasetLabel){%><%=datasetLabel%>: <%}%><%= Math.round(10*value)/10 %>", pointDot: false, showScale: false, animation: false, datasetStrokeWidth: 0.8, scaleOverride: true, scaleSteps: 100, scaleStartValue: 0, scaleStepWidth: 1, pointHitDetectionRadius: 0}'
        )
      div(ng-if="statView.ramOnly", ng-click="statView.ramOnly = false")
        p.stat-name
          //- i.fa.fa-bar-chart
          i.fa.fa-tasks
          //- i.fa.fa-server
          | &nbsp; RAM usage
        canvas.chart.chart-line.chart-stat-full(
          id="bigRam"
          data="[stats.memoryUsed,stats.memory]"
          labels="stats.date"
          series="['Used RAM', 'Total RAM']"
          colours="['#ff0000', '#ffbbbb']"
          legend="true"
          options=' {responsive: true, maintainAspectRatio: false, tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= bytesToSize(value) %>", multiTooltipTemplate:"<%if (datasetLabel){%><%=datasetLabel%>: <%}%><%= bytesToSize(value) %>", datasetStrokeWidth: 0.8, pointDot: false, showScale: false, scaleBeginAtZero: true, animation: false, pointHitDetectionRadius: 0}'
        )
      div(ng-if="statView.netOnly", ng-click="statView.netOnly = false")
        p.stat-name
          i.fa.fa-sitemap
          | &nbsp; Network I/O
        canvas.chart.chart-line.chart-stat-full(
          id="bigNet"
          data="stats.vifs"
          labels="stats.date"
          series="stats.vifSeries"
          colours="['#dddd00', '#dddd77', '#777700', '#dddd55', '#555500', '#ffdd00']"
          legend="true"
          options=' {responsive: true, maintainAspectRatio: false, tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= bytesToSize(value) %>", multiTooltipTemplate:"<%if (datasetLabel){%><%=datasetLabel%>: <%}%><%= bytesToSize(value) %>", datasetStrokeWidth: 0.8, pointDot: false, showScale: false, scaleBeginAtZero: true, animation: false, pointHitDetectionRadius: 0}'
        )
      div(ng-if="statView.diskOnly", ng-click="statView.diskOnly = false")
        p.stat-name
          i.fa.fa-hdd-o
          | &nbsp; Disk I/O
        canvas.chart.chart-line.chart-stat-full(
          id="bigDisk"
          data="stats.xvds"
          labels="stats.date"
          series="stats.xvdSeries"
          colours="['#00dd00', '#77dd77', '#007700', '#33dd33', '#003300']"
          legend="true"
          options=' {responsive: true, maintainAspectRatio: false, multiTooltipTemplate:"<%if (datasetLabel){%><%=datasetLabel%>: <%}%><%= bytesToSize(value) %>", datasetStrokeWidth: 0.8, pointDot: false, showScale: false, scaleBeginAtZero: true, animation: false, pointHitDetectionRadius: 0}'
        )
      div(ng-if="!statView.netOnly && !statView.diskOnly && !statView.cpuOnly && !statView.ramOnly")
        .row
            .col-sm-6(ng-click="statView.cpuOnly=true")
              p.stat-name
                i.fa.fa-tachometer
                | &nbsp; CPU usage
              canvas.chart.chart-line.chart-stat-preview(
                id="smallCpu"
                data="stats.cpus"
                labels="stats.date"
                series="stats.cpuSeries"
                colours="['#0000ff', '#9999ff', '#000099', '#5555ff', '#000055']"
                options='{responsive: true, maintainAspectRatio: false, showTooltips: false, pointDot: false, showScale: false, animation: false, datasetStrokeWidth: 0.8, scaleOverride: true, scaleSteps: 100, scaleStartValue: 0, scaleStepWidth: 1}'
              )
            .col-sm-6(ng-click="statView.ramOnly=true")
              p.stat-name
                //- i.fa.fa-bar-chart
                i.fa.fa-tasks
                //- i.fa.fa-server
                | &nbsp; RAM usage
              canvas.chart.chart-line.chart-stat-preview(
                id="smallRam"
                data="[stats.memoryUsed,stats.memory]"
                labels="stats.date"
                series="['Used RAM', 'Total RAM']"
                colours="['#ff0000', '#ffbbbb']"
                options=' {responsive: true, maintainAspectRatio: false, showTooltips: false, datasetStrokeWidth: 0.8, pointDot: false, showScale: false, scaleBeginAtZero: true, animation: false}'
              )
        .row
          .col-sm-6(ng-click="statView.netOnly=true")
            p.stat-name
              i.fa.fa-sitemap
              | &nbsp; Network I/O
            canvas.chart.chart-line.chart-stat-preview(
              id="smallNet"
              data="stats.vifs"
              labels="stats.date"
              series="stats.vifSeries"
              colours="['#dddd00', '#dddd77', '#777700', '#dddd55', '#555500', '#ffdd00']"
              options=' {responsive: true, maintainAspectRatio: false, showTooltips: false, datasetStrokeWidth: 0.8, pointDot: false, showScale: false, scaleBeginAtZero: true, animation: false}'
            )
          .col-sm-6(ng-click="statView.diskOnly=true")
            p.stat-name
              i.fa.fa-hdd-o
              | &nbsp; Disk I/O
            canvas.chart.chart-line.chart-stat-preview(
              id="smallDisk"
              data="stats.xvds"
              labels="stats.date"
              series="stats.xvdSeries"
              colours="['#00dd00', '#77dd77', '#007700', '#33dd33', '#003300']"
              options=' {responsive: true, maintainAspectRatio: false, showTooltips: false, datasetStrokeWidth: 0.8, pointDot: false, showScale: false, scaleBeginAtZero: true, animation: false}'
            )
    .panel-body(ng-if="!refreshStatControl.running || !stats")
      .grid
        .grid-cell
          p.stat-name vCPUs
          p.center.big {{VM.CPUs.number}}
        .grid-cell
          p.stat-name RAM
          p.center.big {{VM.memory.size | bytesToSize}}
        .grid-cell
          p.stat-name Disks
          p.center.big {{VM.$VBDs.length || 0}}
      br
      p.center(ng-if="refreshStatControl.running")
        i.fa.fa-circle-o-notch.fa-spin.fa-2x
        | &nbsp; Fetching stats...
      .grid
        .grid-cell(ng-if="VM.os_version.distro")
          p.stat-name OS:
          p.center.big
            i(class="xo-icon-{{osType(VM.os_version.distro)}}",tooltip="{{VM.os_version.name}}", style="color: black;")
        .grid-cell
          p.stat-name Xen tools:
          p.center
            span(ng-if="VM.PV_drivers", style="color:green;") Installed
            span(ng-if="!VM.PV_drivers") NOT installed

  //- Action panel
.grid
  .panel.panel-default
    .panel-heading.panel-title
      i.fa.fa-flash(style="color: #e25440;")
      |  Actions
    .panel-body.text-center
      .grid
        .grid-cell.btn-group(ng-if="VM.power_state == ('Running' || 'Paused')")
          button.btn(tooltip="Stop VM", type="button", style="width: 90%", xo-click="stopVM(VM.UUID)")
            i.fa.fa-stop.fa-2x.fa-fw
        .grid-cell.btn-group(ng-if="VM.power_state == ('Running')")
          button.btn(tooltip="Suspend VM", type="button", style="width: 90%", xo-click="suspendVM(VM.UUID)")
            i.fa.fa-pause.fa-2x.fa-fw
        .grid-cell.btn-group(ng-if="VM.power_state == ('Suspended')")
          button.btn(tooltip="Resume VM", type="button", style="width: 90%", xo-click="resumeVM(VM.UUID)")
            i.fa.fa-play.fa-2x.fa-fw
        .grid-cell.btn-group(ng-if="VM.power_state == ('Halted')")
          button.btn(tooltip="Start VM", type="button", style="width: 90%", xo-click="startVM(VM.UUID)")
            i.fa.fa-play.fa-2x.fa-fw
        .grid-cell.btn-group(ng-if="VM.power_state == ('Running' || 'Paused')")
          button.btn(tooltip="Reboot VM", type="button", style="width: 90%", xo-click="rebootVM(VM.UUID)")
            i.fa.fa-refresh.fa-2x.fa-fw
        .grid-cell.btn-group.dropdown(
          ng-if="VM.power_state == ('Running' || 'Paused')"
          dropdown
        )
          button.btn.dropdown-toggle(
            dropdown-toggle
            tooltip="Migrate VM"
            type="button"
            style="width: 90%"
          )
            i.fa.fa-share.fa-2x.fa-fw
            <span class="caret"></span>
          ul.dropdown-menu.left(role="menu")
            li(ng-repeat="host in hosts | orderBy:natural('name_label') track by host.UUID")
              a(ng-click="migrateVM(VM.UUID, host.UUID)")
                i.xo-icon-host.fa-fw
                | To {{host.name_label}}
        .grid-cell.btn-group(ng-if="VM.power_state == ('Running' || 'Paused')")
          button.btn(tooltip="Force Reboot", type="button", style="width: 90%", xo-click="force_rebootVM(VM.UUID)")
            i.fa.fa-flash.fa-2x.fa-fw
        .grid-cell.btn-group(ng-if="VM.power_state == ('Running' || 'Paused')")
          button.btn(tooltip="Force Shutdown", type="button", style="width: 90%", xo-click="force_stopVM(VM.UUID)")
            i.fa.fa-power-off.fa-2x.fa-fw
        .grid-cell.btn-group(ng-if="VM.power_state == ('Halted')")
          button.btn(tooltip="Delete VM", type="button", style="width: 90%", xo-click="destroyVM(VM.UUID)")
            i.fa.fa-trash-o.fa-2x.fa-fw
        .grid-cell.btn-group.dropdown(
          ng-if="VM.power_state == ('Halted')"
          dropdown
        )
          button.btn.dropdown-toggle(
            dropdown-toggle
            tooltip="Create a clone"
            style="width: 90%"
            type="button"
          )
            i.fa.fa-files-o.fa-2x.fa-fw
            <span class="caret"></span>
          ul.dropdown-menu.left(role="menu")
            li
              a(ng-click="cloneVM(VM.UUID,VM.name_label,false)")
                i.fa.fa-code-fork.fa-fw
                | Fast clone
            li
              a(ng-click="cloneVM(VM.UUID,VM.name_label,true)")
                i.xo-icon-sr.fa-fw
                | Full disk copy
        .grid-cell.btn-group
          button.btn(tooltip="Convert to template", type="button", style="width: 90%", xo-click="convertVM(VM.UUID)")
            i.fa.fa-thumb-tack.fa-2x.fa-fw
        .grid-cell.btn-group
          button.btn(tooltip="Create a snapshot", style="width: 90%", type="button", xo-click="snapshotVM(VM.UUID,VM.name_label)")
            i.xo-icon-snapshot.fa-2x.fa-fw
        .grid-cell.btn-group
          button.btn(tooltip="Export the VM", style="width: 90%", type="button", xo-click="exportVM(VM.UUID)")
            i.fa.fa-download.fa-2x.fa-fw
        .grid-cell.btn-group(style="margin-bottom: 0.5em")
          button.btn(tooltip="VM Console", type="button", style="width: 90%", xo-sref="consoles_view({id: VM.UUID})")
            i.xo-icon-console.fa-2x.fa-fw
//- Docker Panel (if Docker VM)
.grid(ng-if="VM.docker")
  .panel.panel-default
    .panel-heading.panel-title
      i.fa.fa-ship(style="color: #e25440;")
      |  Docker containers
    .panel-body
      p.text-center(ng-if="!VM.docker.process.item") No Docker container on this VM.
      table.table.table-hover(ng-if="VM.docker.process.item")
        tr
          th.col-sm-2 Name
          th.col-sm-6 Command
          th.col-sm-2 Created
          th.col-sm-2 Status
        tr(ng-repeat = "container in VM.docker.process.item")
          td.oneliner {{container.entry.names}}
          td.oneliner {{container.entry.command}}
          td.oneliner {{container.entry.created*1e3 | date:"medium"}}
          td(ng-if="container.entry.status === 'Up'")
            span.label.label-success Running
            span.pull-right.btn-group.quick-buttons
              a(
                tooltip="Stop this container"
                xo-click="stopContainer(VM.UUID,container.entry.container)"
              )
                i.fa.fa-stop
              a(
                tooltip="Pause this container"
                xo-click="pauseContainer(VM.UUID,container.entry.container)"
              )
                i.fa.fa-pause
              a(
                tooltip="Restart this container"
                xo-click="restartContainer(VM.UUID,container.entry.container)"
              )
                i.fa.fa-refresh
          td(ng-if="container.entry.status === 'Up (Paused)'")
            span.label.label-info Paused
            span.pull-right.btn-group.quick-buttons
              a(
                tooltip="Resume this container"
                xo-click="resumeContainer(VM.UUID,container.entry.container)"
              )
                i.fa.fa-play
          td(ng-if="container.entry.status !== 'Up' && container.entry.status !== 'Up (Paused)'")
            span.label.label-danger Halted
            span.pull-right.btn-group.quick-buttons
              a(
                tooltip="Start this container"
                xo-click="startContainer(VM.UUID,container.entry.container)"
              )
                i.fa.fa-play
//- Disk panel
.grid
  .panel.panel-default
    .panel-heading.panel-title
      i.xo-icon-sr(style="color: #e25440;")
      |  Disk
      span.quick-edit(
        ng-if="!disksForm.$visible"
        tooltip="Edit disks"
        ng-click="disksForm.$show()"
      )
        i.fa.fa-edit.fa-fw
      span.quick-edit(
        ng-if="disksForm.$visible"
        tooltip="Cancel Edition"
        ng-click="disksForm.$cancel()"
      )
        i.fa.fa-undo.fa-fw
    .panel-body
      form(name = "disksForm", editable-form = '', onbeforesave = 'saveDisks($data)')
        table.table.table-hover
          tr
            th Name
            th Description
            th Size
            th SR
            th Status
            th(ng-show="disksForm.$visible")
          //- FIXME: ng-init seems to disrupt the implicit $watch.
          tr(ng-repeat = 'VDI in VDIs track by VDI.UUID')
            td.oneliner
              span(
                editable-text="VDI.name_label"
                e-name = '{{VDI.UUID}}/name_label'
              )
                | {{VDI.name_label}}
            td.oneliner
              span(
                editable-text="VDI.name_description"
                e-name = '{{VDI.UUID}}/name_description'
              )
                | {{VDI.name_description}}
            td
              //- FIXME: should be editable, but the server needs first
              //- to accept a human readable string.
              | {{VDI.size | bytesToSize}}
            td.oneliner
              span(
                editable-select="(VDI.$SR | resolve).ref"
                e-ng-options="SR.ref as (SR.name_label + ' (' + (SR.size - SR.usage  | bytesToSize) + ' free)') for SR in writable_SRs"
                e-name = '{{VDI.UUID}}/$SR'
              )
                //- Are SR editable? will trigger moving VDI to the new SR
                a(xo-sref="SRs_view({id: (VDI.$SR | resolve).UUID})")
                  | {{(VDI.$SR | resolve).name_label}}
            td(ng-if="isConnected(VDI)")
              span.label.label-success Connected
              span.pull-right.btn-group.quick-buttons
                a(
                  tooltip="Disconnect this disk"
                  xo-click="disconnectVBD(VDI)"
                )
                  i.fa.fa-unlink.fa-lg
            td(ng-if="!isConnected(VDI)")
              span.label.label-default Disconnected
              span.pull-right.btn-group.quick-buttons
                a(
                  tooltip="Plug this disk"
                  ng-if="VM.power_state == ('Running' || 'Paused')"
                  xo-click="connectVBD(VDI)"
                )
                  i.fa.fa-plug.fa-lg
                a(
                  tooltip="Forget this disk"
                  xo-click="deleteVBD(VDI)"
                )
                  i.fa.fa-ban.fa-lg
                a(
                  tooltip="Remove this disk"
                  xo-click="deleteDisk(VDI.UUID)"
                )
                  i.fa.fa-trash-o.fa-lg
            td(ng-show="disksForm.$visible")
              .btn-group
                button.btn.btn-default(
                  type="button"
                  ng-click="moveDisk($index, -1)"
                  ng-disabled="$first"
                  title="Move this disk up"
                )
                  i.fa.fa-chevron-up
                button.btn.btn-default(
                  type="button"
                  ng-click="moveDisk($index, 1)"
                  ng-disabled="$last"
                  title="Move this disk down"
                )
                  i.fa.fa-chevron-down
          //- TODO: Ability to create new VDIs.
        .btn-form(ng-show="disksForm.$visible")
          p.center
            button.btn.btn-default(
              type="reset"
              ng-disabled="disksForm.$waiting"
              ng-click="disksForm.$cancel()"
            )
              i.fa.fa-times
              |  Cancel
            | &nbsp;
            button.btn.btn-primary(
              type="submit"
              ng-disabled="disksForm.$waiting"
            )
              i.fa.fa-save
              |  Save
    .grid
      .col-md-4
        iso-device(ng-if = 'VM && isoDeviceData', vm = 'VM', isos = 'isoDeviceData')
      .col-md-8.text-right
        div
          button.btn(type="button", ng-class = '{"btn-success": adding, "btn-primary": !adding}', ng-disabled="disksForm.$waiting", ng-click="adding = !adding;creatingVdi = false")
            i.fa.fa-plus(ng-if = '!adding')
            i.fa.fa-minus(ng-if = 'adding')
            |  Attach Disk
          | &nbsp;
          button.btn(type="button", ng-class = '{"btn-success": creatingVdi, "btn-primary": !creatingVdi}', ng-disabled="disksForm.$waiting", ng-click="creatingVdi = !creatingVdi;adding = false")
            i.fa.fa-plus(ng-if = '!creatingVdi')
            i.fa.fa-minus(ng-if = 'creatingVdi')
            |  New Disk
        br
        form.form-inline#addDiskForm(ng-if = 'adding', name = 'addForm', ng-submit = 'addVdi(vdiToAdd.vdi, vdiReadOnly, vdiBootable)')
          fieldset(ng-attr-disabled = '{{ addWaiting ? true : undefined }}')
            .form-group
              select#vdiToAdd.form-control(ng-model = 'vdiToAdd', ng-options = 'vdi.label group by vdi.sr for vdi in VDIOpts', required)
                option(value = '', disabled) -- Choose disk --
            | &nbsp;
            .form-group(ng-if = 'vdiToAdd')
              //- .form-group
                label(for = 'vdiPosition') Position&nbsp;
                select#vdiPosition.form-control(ng-model = '$parent.vdiPos', ng-options = 'vPos for vPos in vdiFreePos', required)
                  option(value = '', disabled) --
              | &nbsp;
              .checkbox
                label
                  input(type='checkbox', ng-model = '$parent.$parent.vdiBootable')
                  | Bootable&nbsp;
              .checkbox
                label
                  input(ng-if = '!isFreeForWriting(vdiToAdd.vdi)', type='checkbox', ng-model = '$parent.$parent.vdiReadOnly', ng-checked = 'true', ng-disabled = 'true')
                  input(ng-if = 'isFreeForWriting(vdiToAdd.vdi)',  type='checkbox', ng-model = '$parent.$parent.vdiReadOnly')
                  | Read-only&nbsp;
              .form-group
                button.btn.btn-primary(type = 'submit', ng-disabled="disksForm.$waiting")
                  | Add
                  span(ng-if = 'addWaiting')
                    | &nbsp;
                    i.fa.fa-spin.fa-circle-o-notch
          br
        form.form-inline#createDiskForm(ng-if = 'creatingVdi', name = 'createForm', ng-submit = 'createVdi(newDiskName, newDiskSize, newDiskSR, newDiskBootable, newDiskReadonly)')
          fieldset(ng-attr-disabled = '{{ createWaiting ? true : undefined }}')
            .form-group
              //- label(for = 'newDiskName') Name&nbsp;
              input#newDiskName.form-control(type = 'text', ng-model = 'newDiskName', placeholder = 'Disk Name', required)
            | &nbsp;
            .form-group
              //- label(for = 'newDiskSize') Size&nbsp;
              input#newDiskSize.form-control(type = 'text', ng-model = 'newDiskSize', required, placeholder = 'Size e.g 128MB, 8GB, 2TB...')
            | &nbsp;
            .form-group
              //- label(for = 'newDiskSR') SR&nbsp;
              select.form-control(ng-model = 'newDiskSR', required, ng-options="SR.ref as (SR.name_label + ' (' + (SR.size - SR.usage  | bytesToSize) + ' free)') for SR in writable_SRs")
                option(value = '', disabled) Choose your SR
            | &nbsp;
            br
            br
            .checkbox
              label
                input(type='checkbox', ng-model = 'newDiskBootable')
                | &nbsp;Bootable&nbsp;
            .checkbox
              label
                input(type='checkbox', ng-model = 'newDiskReadonly')
                | &nbsp;Read-only&nbsp;
            //- .form-group
              label(for = 'diskPosition') Position&nbsp;
              select#diskPosition.form-control(ng-model = 'newDiskPosition', ng-options = 'vPos for vPos in vdiFreePos', required)
                option(value = '', disabled) --
            | &nbsp;
            br
            br
            .form-group
              button.btn.btn-primary(type = 'submit', ng-disabled="disksForm.$waiting")
                i.fa.fa-plus-square
                | &nbsp;Create
                span(ng-if = 'createWaiting')
                  | &nbsp;
                  i.fa.fa-spin.fa-circle-o-notch
          br

//- TODO: add interface in this panel
.grid
  .panel.panel-default
    .panel-heading.panel-title
      i.xo-icon-network(style="color: #e25440;")
      |  Interface
    .panel-body
      table.table.table-hover
        th Device
        th MAC
        th MTU
        th Network
        th Link status
        tr(ng-repeat="VIF in VM.VIFs | resolve | orderBy:natural('device') track by VIF.UUID")
          td VIF \#{{VIF.device}}
          td
            | {{VIF.MAC}}
          td
            | {{VIF.MTU}}
          td.oneliner
            | {{(VIF.$network | resolve).name_label}}
          td(ng-if="VIF.attached")
            span.label.label-success Connected
            span.pull-right.btn-group.quick-buttons
              a(tooltip="Disconnect this interface", ng-if="VM.power_state == ('Running' || 'Paused')", xo-click="disconnectVIF(VIF.UUID)")
                i.fa.fa-unlink.fa-lg
          td(ng-if="!VIF.attached")
            span.label.label-default Disconnected
            span.pull-right.btn-group.quick-buttons
              a(tooltip="Connect this interface", xo-click="connectVIF(VIF.UUID)")
                i.fa.fa-link.fa-lg
              a(tooltip="Remove this interface", xo-click="deleteVIF(VIF.UUID)")
                i.fa.fa-trash-o.fa-lg
      .text-right
        button.btn(type="button", ng-class = '{"btn-success": creatingVif, "btn-primary": !creatingVif}', ng-click="creatingVif = !creatingVif")
          i.fa.fa-plus(ng-if = '!creatingVif')
          i.fa.fa-minus(ng-if = 'creatingVif')
          |  Create Interface
      br
      form.form-inline.text-right#createInterfaceForm(ng-if = 'creatingVif', name = 'createInterfaceForm', ng-submit = 'createInterface(newInterfaceNetwork, newInterfaceMTU, autoMac, newInterfaceMAC)')
        fieldset(ng-attr-disabled = '{{ createVifWaiting ? true : undefined }}')
          .form-group
            label(for = 'newVifNetwork') Network&nbsp;
            select.form-control(ng-model = 'newInterfaceNetwork', ng-change = 'updateMTU(newInterfaceNetwork)', required, ng-options='network.name_label for network in networks')
              option(value = '', disabled) --
          | &nbsp;
          .form-group
            fieldset(ng-attr-disabled = '{{ autoMac ? true : undefined }}')
              label.control-label(for = 'newInterfaceMAC') MAC address&nbsp;
              input#newInterfaceMAC.form-control(ng-class = '{hidden: autoMac}', type = 'text', ng-model = 'newInterfaceMAC', ng-required = '!autoMac')
          | &nbsp;
          .checkbox
            label
              input(type='checkbox', ng-model = 'autoMac')
              | Auto-generate &nbsp;
          | &nbsp;
          .form-group
            label(for = 'newInterfaceMTU') MTU&nbsp;
            input#newInterfaceMTU.form-control(type = 'text', ng-model = 'newInterfaceMTU', required)
          | &nbsp;
          .form-group
            button.btn.btn-primary(type = 'submit')
              i.fa.fa-plus-square
              | Create
              span(ng-if = 'createVifWaiting')
                | &nbsp;
                i.fa.fa-spin.fa-circle-o-notch
        br
//- Snap panel
.grid
  form(editable-form="", name="vmSnap", oncancel="cancel()").panel.panel-default
    .panel-heading.panel-title
      i.xo-icon-snapshot(style="color: #e25440;")
      |  Snapshots
      span.quick-edit(tooltip="Edit snapshots", ng-click="vmSnap.$show()")
        i.fa.fa-edit.fa-fw
    .panel-body
      p.center(ng-if="!VM.snapshots.length") No snapshots
      table.table.table-hover(ng-if="VM.snapshots.length")
        th Date
        th Name
        tr(ng-repeat="snapshot in VM.snapshots | resolve | orderBy:'-snapshot_time' track by snapshot.UUID")
          td.oneliner {{snapshot.snapshot_time*1e3 | date:"medium"}}
          td.oneliner
            span(editable-text="snapshot.name_label", e-name="name_label", e-form="vmSnap", onbeforesave="saveSnapshot(snapshot.UUID, $data)")
              | {{snapshot.name_label}}
            span.pull-right.btn-group.quick-buttons
              a(tooltip="Export this snapshot", type="button", xo-click="exportVM(snapshot.UUID)")
                i.fa.fa-upload.fa-lg
              a(tooltip="Revert VM to this snapshot", xo-click="revertSnapshot(snapshot.UUID)")
                i.fa.fa-undo.fa-lg
              a(tooltip="Remove this snapshot", xo-click="deleteSnapshot(snapshot.UUID)")
                i.fa.fa-trash-o.fa-lg
      .btn-form(ng-show="vmSnap.$visible")
        p.center
          button.btn.btn-default(type="button", ng-disabled="vmSnap.$waiting", ng-click="vmSnap.$cancel()")
            i.fa.fa-times
            | Cancel
          | &nbsp;
          button.btn.btn-primary(type="submit", ng-disabled="vmSnap.$waiting", ng-click="saveChanges()")
            i.fa.fa-save
            | Save
  //- Logs panel
  .panel.panel-default
    .panel-heading.panel-title
      i.fa.fa-comments(style="color: #e25440;")
      |  Logs
      span.quick-edit(ng-if="VM.messages.length", tooltip="Remove all logs", xo-click="deleteAllLog()")
        i.fa.fa-trash-o.fa-fw
    .panel-body
      p.center(ng-if="!VM.messages.length") No recent logs
      table.table.table-hover(ng-if="VM.messages.length")
        th Date
        th Name
        tr(ng-repeat="message in VM.messages | resolve | orderBy:'-time' track by message.UUID")
          td.oneliner {{message.time*1e3 | date:"medium"}}
          td.oneliner
            | {{message.name}}
            span.pull-right.btn-group.quick-buttons
              a(xo-click="deleteLog(message.UUID)")
                i.fa.fa-trash-o.fa-lg(tooltip="Remove this log entry")
.grid
  .panel.panel-default
    .panel-heading.panel-title
      i.fa.fa-plug(style="color: #e25440;")
      |  PCI Devices
    .panel-body
      p.center(ng-if="!(VM.$container | resolve).$PCIs") No PCI devices available
      table.table.table-hover(ng-if="(VM.$container | resolve).$PCIs")
        th PCI Info
        th Device Name
        th Status
        tr(ng-repeat="pci in ((VM.$container | resolve).$PCIs | resolve) | orderBy:'pci_id' track by pci.UUID")
          td.oneliner {{pci.pci_id}} ({{pci.class_name}})
          td.oneliner {{pci.device_name}}
          td(ng-if="pci.pci_id === VM.other.pci")
            span.label.label-success Attached
            span.pull-right.btn-group.quick-buttons
              a(tooltip="Disconnect this PCI device", xo-click="disconnectPci(VM.UUID)")
                i.fa.fa-unlink.fa-lg
          td(ng-if="pci.pci_id !== VM.other.pci")
            span.label.label-default Not attached
            span.pull-right.btn-group.quick-buttons
              a(tooltip="Connect this PCI device", xo-click="connectPci(VM.UUID, pci.pci_id)")
                i.fa.fa-link.fa-lg
  .panel.panel-default
    .panel-heading.panel-title
      i.fa.fa-desktop(style="color: #e25440;")
      |  vGPUs
    .panel-body
      p.center(ng-if="!VM.$VGPus") No vGPUs available
      table.table.table-hover(ng-if="VM.$VGPus")
        th Device
        th Status
        tr(ng-repeat="vgpu in VM.$VGPUs | resolve | orderBy:'device' track by vgpu.UUID")
          td.oneliner {{vgpu.device}}
          td(ng-if="vgu.currentlyAttached")
            span.label.label-success Attached
          td(ng-if="!vgu.currentlyAttached")
            span.label.label-default Not attached
<commit_msg>some UI fixes for VM view<commit_after>.grid
  .panel.panel-default
    p.page-title
      i.xo-icon-vm(ng-if="isVMWorking(VM)", class="xo-color-pending", tooltip="{{VM.power_state}} and {{values(VM.current_operations)[0]}}")
      i.xo-icon-vm(class="xo-color-{{VM.power_state | lowercase}}",ng-if="!isVMWorking(VM)", tooltip="{{VM.power_state}}")
      |  {{VM.name_label}}
.grid
  .panel.panel-default
    .panel-heading.panel-title
      i.fa.fa-cogs(style="color: #e25440;")
      |  General
      span.quick-edit(tooltip="Edit General settings", ng-click="vmSettings.$show()")
        i.fa.fa-edit.fa-fw
    .panel-body
      form(editable-form="", name="vmSettings", onbeforesave="saveVM($data)")
        dl.dl-horizontal
          dt Name
          dd
            span(editable-text="VM.name_label", e-name="name_label", e-form="vmSettings")
              | {{VM.name_label}}
          dt Description
          dd
            span(editable-text="VM.name_description", e-name="name_description", e-form="vmSettings")
              | {{VM.name_description}}
          dt(ng-if="VM.power_state === 'Running' || VM.power_state === 'Paused'") Running on:
          dt(ng-if="VM.power_state == 'Halted' || VM.power_state === 'Suspended'") Resident on:
          dd(ng-repeat="container in [VM.$container] | resolve")
            span(ng-if = 'container.type === "host"')
              a(xo-sref="hosts_view({id: container.UUID})")
                | {{container.name_label}}
              small
                span(ng-if="(container.poolRef | resolve).name_label")
                  | (
                  a(ui-sref="pools_view({id: (container.poolRef | resolve).UUID})") {{(container.poolRef | resolve).name_label}}
                  | )
            a(
              ng-if = 'container.type === "pool"'
              xo-sref="pools_view({id: container.UUID})"
            )
              | {{container.name_label}}
          dt(ng-if="!VM.addresses") No IP address
          dt(ng-if="VM.addresses") Addresses
          dd(ng-repeat="IP in VM.addresses") {{IP}}
          dt(ng-if="!(VM.poolRef | resolve).HA_enabled") Auto Power
          dd(ng-if="!(VM.poolRef | resolve).HA_enabled")
            span(
              editable-checkbox="VM.auto_poweron"
              e-name="auto_poweron"
              e-form="vmSettings"
            )
              | {{VM.auto_poweron}}
          dt(ng-if="(VM.poolRef | resolve).HA_enabled") HA
          dd(ng-if="(VM.poolRef | resolve).HA_enabled")
            span(
              editable-checkbox="VM.high_availability"
              e-name="high_availability"
              e-form="vmSettings"
            )
              | {{VM.high_availability}}
          dt vCPUs
          dd
            span(
              editable-text="VM.CPUs.number"
              e-name="CPUs"
              e-form="vmSettings"
            )
              | {{VM.CPUs.number}}
          dt RAM
          dd
            span(
              editable-text="memorySize"
              e-name="memory"
              e-form="vmSettings"
            )
              | {{memorySize}}
          dt UUID
          dd {{VM.UUID}}
          dt(ng-if="refreshStatControl.running && stats") Xen tools:
          dd(ng-if="refreshStatControl.running && stats")
            span(ng-if="VM.PV_drivers", style="color:green;") Installed
            span(ng-if="!VM.PV_drivers") NOT installed
          dt(ng-if="refreshStatControl.running && stats && VM.os_version.distro") OS:
          dd(ng-if="refreshStatControl.running && stats && VM.os_version.distro")
            | {{VM.os_version.name}} ({{VM.os_version.distro}})
          dt(ng-if="refreshStatControl.running && stats && VM.os_version.uname") Kernel:
          dd(ng-if="refreshStatControl.running && stats && VM.os_version.uname")
            | {{VM.os_version.uname}}
          dt(ng-if="VM.docker") Docker:
          dd(ng-if="!VM.docker.enabled") {{VM.docker.enabled}}
            span(
              editable-checkbox="VM.docker.enabled"
              e-name="enabled"
              e-form="vmSettings"
            )
          dd(ng-if="VM.docker.enabled") {{VM.docker.version.Version}} (API: {{VM.docker.version.ApiVersion}})
        .btn-form(ng-show="vmSettings.$visible")
          p.center
            button.btn.btn-default(
              type="button"
              ng-disabled="vmSettings.$waiting"
              ng-click="vmSettings.$cancel()"
            )
              i.fa.fa-times
              |  Cancel
            | &nbsp;
            button.btn.btn-primary(
              type="submit"
              ng-disabled="vmSettings.$waiting"
            )
              i.fa.fa-save
              |  Save

  .panel.panel-default.panel-height.center
    .panel-heading.panel-title
      i.xo-icon-stats(style="color: #e25440;", xo-click="refreshStats(VM.UUID)")
      |  Stats
    .panel-body-stats(ng-if="refreshStatControl.running && stats")
      div(ng-if="statView.cpuOnly", ng-click="statView.cpuOnly = false")
        p.stat-name
          i.fa.fa-tachometer
          | &nbsp; CPU usage
        canvas.chart.chart-line.chart-stat-full(
          id="bigCpu"
          data="stats.cpus"
          labels="stats.date"
          series="stats.cpuSeries"
          colours="['#0000ff', '#9999ff', '#000099', '#5555ff', '#000055']"
          legend="true"
          options='{responsive: true, maintainAspectRatio: false, tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= Math.round(10*value)/10 %>", multiTooltipTemplate:"<%if (datasetLabel){%><%=datasetLabel%>: <%}%><%= Math.round(10*value)/10 %>", pointDot: false, showScale: false, animation: false, datasetStrokeWidth: 0.8, scaleOverride: true, scaleSteps: 100, scaleStartValue: 0, scaleStepWidth: 1, pointHitDetectionRadius: 0}'
        )
      div(ng-if="statView.ramOnly", ng-click="statView.ramOnly = false")
        p.stat-name
          //- i.fa.fa-bar-chart
          i.fa.fa-tasks
          //- i.fa.fa-server
          | &nbsp; RAM usage
        canvas.chart.chart-line.chart-stat-full(
          id="bigRam"
          data="[stats.memoryUsed,stats.memory]"
          labels="stats.date"
          series="['Used RAM', 'Total RAM']"
          colours="['#ff0000', '#ffbbbb']"
          legend="true"
          options=' {responsive: true, maintainAspectRatio: false, tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= bytesToSize(value) %>", multiTooltipTemplate:"<%if (datasetLabel){%><%=datasetLabel%>: <%}%><%= bytesToSize(value) %>", datasetStrokeWidth: 0.8, pointDot: false, showScale: false, scaleBeginAtZero: true, animation: false, pointHitDetectionRadius: 0}'
        )
      div(ng-if="statView.netOnly", ng-click="statView.netOnly = false")
        p.stat-name
          i.fa.fa-sitemap
          | &nbsp; Network I/O
        canvas.chart.chart-line.chart-stat-full(
          id="bigNet"
          data="stats.vifs"
          labels="stats.date"
          series="stats.vifSeries"
          colours="['#dddd00', '#dddd77', '#777700', '#dddd55', '#555500', '#ffdd00']"
          legend="true"
          options=' {responsive: true, maintainAspectRatio: false, tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= bytesToSize(value) %>", multiTooltipTemplate:"<%if (datasetLabel){%><%=datasetLabel%>: <%}%><%= bytesToSize(value) %>", datasetStrokeWidth: 0.8, pointDot: false, showScale: false, scaleBeginAtZero: true, animation: false, pointHitDetectionRadius: 0}'
        )
      div(ng-if="statView.diskOnly", ng-click="statView.diskOnly = false")
        p.stat-name
          i.fa.fa-hdd-o
          | &nbsp; Disk I/O
        canvas.chart.chart-line.chart-stat-full(
          id="bigDisk"
          data="stats.xvds"
          labels="stats.date"
          series="stats.xvdSeries"
          colours="['#00dd00', '#77dd77', '#007700', '#33dd33', '#003300']"
          legend="true"
          options=' {responsive: true, maintainAspectRatio: false, multiTooltipTemplate:"<%if (datasetLabel){%><%=datasetLabel%>: <%}%><%= bytesToSize(value) %>", datasetStrokeWidth: 0.8, pointDot: false, showScale: false, scaleBeginAtZero: true, animation: false, pointHitDetectionRadius: 0}'
        )
      div(ng-if="!statView.netOnly && !statView.diskOnly && !statView.cpuOnly && !statView.ramOnly")
        .row
            .col-sm-6(ng-click="statView.cpuOnly=true")
              p.stat-name
                i.fa.fa-tachometer
                | &nbsp; CPU usage
              canvas.chart.chart-line.chart-stat-preview(
                id="smallCpu"
                data="stats.cpus"
                labels="stats.date"
                series="stats.cpuSeries"
                colours="['#0000ff', '#9999ff', '#000099', '#5555ff', '#000055']"
                options='{responsive: true, maintainAspectRatio: false, showTooltips: false, pointDot: false, showScale: false, animation: false, datasetStrokeWidth: 0.8, scaleOverride: true, scaleSteps: 100, scaleStartValue: 0, scaleStepWidth: 1}'
              )
            .col-sm-6(ng-click="statView.ramOnly=true")
              p.stat-name
                //- i.fa.fa-bar-chart
                i.fa.fa-tasks
                //- i.fa.fa-server
                | &nbsp; RAM usage
              canvas.chart.chart-line.chart-stat-preview(
                id="smallRam"
                data="[stats.memoryUsed,stats.memory]"
                labels="stats.date"
                series="['Used RAM', 'Total RAM']"
                colours="['#ff0000', '#ffbbbb']"
                options=' {responsive: true, maintainAspectRatio: false, showTooltips: false, datasetStrokeWidth: 0.8, pointDot: false, showScale: false, scaleBeginAtZero: true, animation: false}'
              )
        .row
          .col-sm-6(ng-click="statView.netOnly=true")
            p.stat-name
              i.fa.fa-sitemap
              | &nbsp; Network I/O
            canvas.chart.chart-line.chart-stat-preview(
              id="smallNet"
              data="stats.vifs"
              labels="stats.date"
              series="stats.vifSeries"
              colours="['#dddd00', '#dddd77', '#777700', '#dddd55', '#555500', '#ffdd00']"
              options=' {responsive: true, maintainAspectRatio: false, showTooltips: false, datasetStrokeWidth: 0.8, pointDot: false, showScale: false, scaleBeginAtZero: true, animation: false}'
            )
          .col-sm-6(ng-click="statView.diskOnly=true")
            p.stat-name
              i.fa.fa-hdd-o
              | &nbsp; Disk I/O
            canvas.chart.chart-line.chart-stat-preview(
              id="smallDisk"
              data="stats.xvds"
              labels="stats.date"
              series="stats.xvdSeries"
              colours="['#00dd00', '#77dd77', '#007700', '#33dd33', '#003300']"
              options=' {responsive: true, maintainAspectRatio: false, showTooltips: false, datasetStrokeWidth: 0.8, pointDot: false, showScale: false, scaleBeginAtZero: true, animation: false}'
            )
    .panel-body(ng-if="!refreshStatControl.running || !stats")
      .grid
        .grid-cell
          p.stat-name vCPUs
          p.center.big {{VM.CPUs.number}}
        .grid-cell
          p.stat-name RAM
          p.center.big {{VM.memory.size | bytesToSize}}
        .grid-cell
          p.stat-name Disks
          p.center.big {{VM.$VBDs.length || 0}}
      br
      p.center(ng-if="refreshStatControl.running")
        i.fa.fa-circle-o-notch.fa-spin.fa-2x
        | &nbsp; Fetching stats...
      .grid
        .grid-cell(ng-if="VM.os_version.distro")
          p.stat-name OS:
          p.center.big
            i(class="xo-icon-{{osType(VM.os_version.distro)}}",tooltip="{{VM.os_version.name}}", style="color: black;")
        .grid-cell
          p.stat-name Xen tools:
          p.center
            span(ng-if="VM.PV_drivers", style="color:green;") Installed
            span(ng-if="!VM.PV_drivers") NOT installed

  //- Action panel
.grid
  .panel.panel-default
    .panel-heading.panel-title
      i.fa.fa-flash(style="color: #e25440;")
      |  Actions
    .panel-body.text-center
      .grid
        .grid-cell.btn-group(ng-if="VM.power_state == ('Running' || 'Paused')")
          button.btn(tooltip="Stop VM", type="button", style="width: 90%", xo-click="stopVM(VM.UUID)")
            i.fa.fa-stop.fa-2x.fa-fw
        .grid-cell.btn-group(ng-if="VM.power_state == ('Running')")
          button.btn(tooltip="Suspend VM", type="button", style="width: 90%", xo-click="suspendVM(VM.UUID)")
            i.fa.fa-pause.fa-2x.fa-fw
        .grid-cell.btn-group(ng-if="VM.power_state == ('Suspended')")
          button.btn(tooltip="Resume VM", type="button", style="width: 90%", xo-click="resumeVM(VM.UUID)")
            i.fa.fa-play.fa-2x.fa-fw
        .grid-cell.btn-group(ng-if="VM.power_state == ('Halted')")
          button.btn(tooltip="Start VM", type="button", style="width: 90%", xo-click="startVM(VM.UUID)")
            i.fa.fa-play.fa-2x.fa-fw
        .grid-cell.btn-group(ng-if="VM.power_state == ('Running' || 'Paused')")
          button.btn(tooltip="Reboot VM", type="button", style="width: 90%", xo-click="rebootVM(VM.UUID)")
            i.fa.fa-refresh.fa-2x.fa-fw
        .grid-cell.btn-group.dropdown(
          ng-if="VM.power_state == ('Running' || 'Paused')"
          dropdown
        )
          button.btn.dropdown-toggle(
            dropdown-toggle
            tooltip="Migrate VM"
            type="button"
            style="width: 90%"
          )
            i.fa.fa-share.fa-2x.fa-fw
            <span class="caret"></span>
          ul.dropdown-menu.left(role="menu")
            li(ng-repeat="host in hosts | orderBy:natural('name_label') track by host.UUID")
              a(ng-click="migrateVM(VM.UUID, host.UUID)")
                i.xo-icon-host.fa-fw
                | To {{host.name_label}}
        .grid-cell.btn-group(ng-if="VM.power_state == ('Running' || 'Paused')")
          button.btn(tooltip="Force Reboot", type="button", style="width: 90%", xo-click="force_rebootVM(VM.UUID)")
            i.fa.fa-flash.fa-2x.fa-fw
        .grid-cell.btn-group(ng-if="VM.power_state == ('Running' || 'Paused')")
          button.btn(tooltip="Force Shutdown", type="button", style="width: 90%", xo-click="force_stopVM(VM.UUID)")
            i.fa.fa-power-off.fa-2x.fa-fw
        .grid-cell.btn-group(ng-if="VM.power_state == ('Halted')")
          button.btn(tooltip="Delete VM", type="button", style="width: 90%", xo-click="destroyVM(VM.UUID)")
            i.fa.fa-trash-o.fa-2x.fa-fw
        .grid-cell.btn-group.dropdown(
          ng-if="VM.power_state == ('Halted')"
          dropdown
        )
          button.btn.dropdown-toggle(
            dropdown-toggle
            tooltip="Create a clone"
            style="width: 90%"
            type="button"
          )
            i.fa.fa-files-o.fa-2x.fa-fw
            <span class="caret"></span>
          ul.dropdown-menu.left(role="menu")
            li
              a(ng-click="cloneVM(VM.UUID,VM.name_label,false)")
                i.fa.fa-code-fork.fa-fw
                | Fast clone
            li
              a(ng-click="cloneVM(VM.UUID,VM.name_label,true)")
                i.xo-icon-sr.fa-fw
                | Full disk copy
        .grid-cell.btn-group
          button.btn(tooltip="Convert to template", type="button", style="width: 90%", xo-click="convertVM(VM.UUID)")
            i.fa.fa-thumb-tack.fa-2x.fa-fw
        .grid-cell.btn-group
          button.btn(tooltip="Create a snapshot", style="width: 90%", type="button", xo-click="snapshotVM(VM.UUID,VM.name_label)")
            i.xo-icon-snapshot.fa-2x.fa-fw
        .grid-cell.btn-group
          button.btn(tooltip="Export the VM", style="width: 90%", type="button", xo-click="exportVM(VM.UUID)")
            i.fa.fa-download.fa-2x.fa-fw
        .grid-cell.btn-group(style="margin-bottom: 0.5em")
          button.btn(tooltip="VM Console", type="button", style="width: 90%", xo-sref="consoles_view({id: VM.UUID})")
            i.xo-icon-console.fa-2x.fa-fw
//- Docker Panel (if Docker VM)
.grid(ng-if="VM.docker")
  .panel.panel-default
    .panel-heading.panel-title
      i.fa.fa-ship(style="color: #e25440;")
      |  Docker containers
    .panel-body
      p.text-center(ng-if="!VM.docker.process.item") No Docker container on this VM.
      table.table.table-hover(ng-if="VM.docker.process.item")
        tr
          th.col-sm-2 Name
          th.col-sm-6 Command
          th.col-sm-2 Created
          th.col-sm-2 Status
        tr(ng-repeat = "container in VM.docker.process.item")
          td.oneliner {{container.entry.names}}
          td.oneliner {{container.entry.command}}
          td.oneliner {{container.entry.created*1e3 | date:"medium"}}
          td(ng-if="container.entry.status === 'Up'")
            span.label.label-success Running
            span.pull-right.btn-group.quick-buttons
              a(
                tooltip="Stop this container"
                xo-click="stopContainer(VM.UUID,container.entry.container)"
              )
                i.fa.fa-stop
              a(
                tooltip="Pause this container"
                xo-click="pauseContainer(VM.UUID,container.entry.container)"
              )
                i.fa.fa-pause
              a(
                tooltip="Restart this container"
                xo-click="restartContainer(VM.UUID,container.entry.container)"
              )
                i.fa.fa-refresh
          td(ng-if="container.entry.status === 'Up (Paused)'")
            span.label.label-info Paused
            span.pull-right.btn-group.quick-buttons
              a(
                tooltip="Resume this container"
                xo-click="resumeContainer(VM.UUID,container.entry.container)"
              )
                i.fa.fa-play
          td(ng-if="container.entry.status !== 'Up' && container.entry.status !== 'Up (Paused)'")
            span.label.label-danger Halted
            span.pull-right.btn-group.quick-buttons
              a(
                tooltip="Start this container"
                xo-click="startContainer(VM.UUID,container.entry.container)"
              )
                i.fa.fa-play
//- Disk panel
.grid
  .panel.panel-default
    .panel-heading.panel-title
      i.xo-icon-sr(style="color: #e25440;")
      |  Disk
      span.quick-edit(
        ng-if="!disksForm.$visible"
        tooltip="Edit disks"
        ng-click="disksForm.$show()"
      )
        i.fa.fa-edit.fa-fw
      span.quick-edit(
        ng-if="disksForm.$visible"
        tooltip="Cancel Edition"
        ng-click="disksForm.$cancel()"
      )
        i.fa.fa-undo.fa-fw
    .panel-body
      form(name = "disksForm", editable-form = '', onbeforesave = 'saveDisks($data)')
        table.table.table-hover
          tr
            th Name
            th Description
            th Size
            th SR
            th Status
            th(ng-show="disksForm.$visible")
          //- FIXME: ng-init seems to disrupt the implicit $watch.
          tr(ng-repeat = 'VDI in VDIs track by VDI.UUID')
            td.oneliner
              span(
                editable-text="VDI.name_label"
                e-name = '{{VDI.UUID}}/name_label'
              )
                | {{VDI.name_label}}
            td.oneliner
              span(
                editable-text="VDI.name_description"
                e-name = '{{VDI.UUID}}/name_description'
              )
                | {{VDI.name_description}}
            td
              //- FIXME: should be editable, but the server needs first
              //- to accept a human readable string.
              | {{VDI.size | bytesToSize}}
            td.oneliner
              span(
                editable-select="(VDI.$SR | resolve).ref"
                e-ng-options="SR.ref as (SR.name_label + ' (' + (SR.size - SR.usage  | bytesToSize) + ' free)') for SR in writable_SRs"
                e-name = '{{VDI.UUID}}/$SR'
              )
                //- Are SR editable? will trigger moving VDI to the new SR
                a(xo-sref="SRs_view({id: (VDI.$SR | resolve).UUID})")
                  | {{(VDI.$SR | resolve).name_label}}
            td(ng-if="isConnected(VDI)")
              span.label.label-success Connected
              span.pull-right.btn-group.quick-buttons
                a(
                  tooltip="Disconnect this disk"
                  xo-click="disconnectVBD(VDI)"
                )
                  i.fa.fa-unlink.fa-lg
            td(ng-if="!isConnected(VDI)")
              span.label.label-default Disconnected
              span.pull-right.btn-group.quick-buttons
                a(
                  tooltip="Plug this disk"
                  ng-if="VM.power_state == ('Running' || 'Paused')"
                  xo-click="connectVBD(VDI)"
                )
                  i.fa.fa-plug.fa-lg
                a(
                  tooltip="Forget this disk"
                  xo-click="deleteVBD(VDI)"
                )
                  i.fa.fa-ban.fa-lg
                a(
                  tooltip="Remove this disk"
                  xo-click="deleteDisk(VDI.UUID)"
                )
                  i.fa.fa-trash-o.fa-lg
            td(ng-show="disksForm.$visible")
              .btn-group
                button.btn.btn-default(
                  type="button"
                  ng-click="moveDisk($index, -1)"
                  ng-disabled="$first"
                  title="Move this disk up"
                )
                  i.fa.fa-chevron-up
                button.btn.btn-default(
                  type="button"
                  ng-click="moveDisk($index, 1)"
                  ng-disabled="$last"
                  title="Move this disk down"
                )
                  i.fa.fa-chevron-down
          //- TODO: Ability to create new VDIs.
        .btn-form(ng-show="disksForm.$visible")
          p.center
            button.btn.btn-default(
              type="reset"
              ng-disabled="disksForm.$waiting"
              ng-click="disksForm.$cancel()"
            )
              i.fa.fa-times
              |  Cancel
            | &nbsp;
            button.btn.btn-primary(
              type="submit"
              ng-disabled="disksForm.$waiting"
            )
              i.fa.fa-save
              |  Save
    .grid
      .col-md-4
        iso-device(ng-if = 'VM && isoDeviceData', vm = 'VM', isos = 'isoDeviceData')
      .col-md-8.text-right
        div
          button.btn(type="button", ng-class = '{"btn-success": adding, "btn-primary": !adding}', ng-disabled="disksForm.$waiting", ng-click="adding = !adding;creatingVdi = false")
            i.fa.fa-plus(ng-if = '!adding')
            i.fa.fa-minus(ng-if = 'adding')
            |  Attach Disk
          | &nbsp;
          button.btn(type="button", ng-class = '{"btn-success": creatingVdi, "btn-primary": !creatingVdi}', ng-disabled="disksForm.$waiting", ng-click="creatingVdi = !creatingVdi;adding = false")
            i.fa.fa-plus(ng-if = '!creatingVdi')
            i.fa.fa-minus(ng-if = 'creatingVdi')
            |  New Disk
        br
        form.form-inline#addDiskForm(ng-if = 'adding', name = 'addForm', ng-submit = 'addVdi(vdiToAdd.vdi, vdiReadOnly, vdiBootable)')
          fieldset(ng-attr-disabled = '{{ addWaiting ? true : undefined }}')
            .form-group
              select#vdiToAdd.form-control(ng-model = 'vdiToAdd', ng-options = 'vdi.label group by vdi.sr for vdi in VDIOpts', required)
                option(value = '', disabled) -- Choose disk --
            | &nbsp;
            .form-group(ng-if = 'vdiToAdd')
              //- .form-group
                label(for = 'vdiPosition') Position&nbsp;
                select#vdiPosition.form-control(ng-model = '$parent.vdiPos', ng-options = 'vPos for vPos in vdiFreePos', required)
                  option(value = '', disabled) --
              | &nbsp;
              .checkbox
                label
                  input(type='checkbox', ng-model = '$parent.$parent.vdiBootable')
                  | Bootable&nbsp;
              .checkbox
                label
                  input(ng-if = '!isFreeForWriting(vdiToAdd.vdi)', type='checkbox', ng-model = '$parent.$parent.vdiReadOnly', ng-checked = 'true', ng-disabled = 'true')
                  input(ng-if = 'isFreeForWriting(vdiToAdd.vdi)',  type='checkbox', ng-model = '$parent.$parent.vdiReadOnly')
                  | Read-only&nbsp;
              .form-group
                button.btn.btn-primary(type = 'submit', ng-disabled="disksForm.$waiting")
                  | Add
                  span(ng-if = 'addWaiting')
                    | &nbsp;
                    i.fa.fa-spin.fa-circle-o-notch
          br
        form.form-inline#createDiskForm(ng-if = 'creatingVdi', name = 'createForm', ng-submit = 'createVdi(newDiskName, newDiskSize, newDiskSR, newDiskBootable, newDiskReadonly)')
          fieldset(ng-attr-disabled = '{{ createWaiting ? true : undefined }}')
            .form-group
              //- label(for = 'newDiskName') Name&nbsp;
              input#newDiskName.form-control(type = 'text', ng-model = 'newDiskName', placeholder = 'Disk Name', required)
            | &nbsp;
            .form-group
              //- label(for = 'newDiskSize') Size&nbsp;
              input#newDiskSize.form-control(type = 'text', ng-model = 'newDiskSize', required, placeholder = 'Size e.g 128MB, 8GB, 2TB...')
            | &nbsp;
            .form-group
              //- label(for = 'newDiskSR') SR&nbsp;
              select.form-control(ng-model = 'newDiskSR', required, ng-options="SR.ref as (SR.name_label + ' (' + (SR.size - SR.usage  | bytesToSize) + ' free)') for SR in writable_SRs")
                option(value = '', disabled) Choose your SR
            | &nbsp;
            br
            br
            .checkbox
              label
                input(type='checkbox', ng-model = 'newDiskBootable')
                | &nbsp;Bootable&nbsp;
            .checkbox
              label
                input(type='checkbox', ng-model = 'newDiskReadonly')
                | &nbsp;Read-only&nbsp;
            //- .form-group
              label(for = 'diskPosition') Position&nbsp;
              select#diskPosition.form-control(ng-model = 'newDiskPosition', ng-options = 'vPos for vPos in vdiFreePos', required)
                option(value = '', disabled) --
            | &nbsp;
            br
            br
            .form-group
              button.btn.btn-primary(type = 'submit', ng-disabled="disksForm.$waiting")
                i.fa.fa-plus-square
                | &nbsp;Create
                span(ng-if = 'createWaiting')
                  | &nbsp;
                  i.fa.fa-spin.fa-circle-o-notch
          br

//- TODO: add interface in this panel
.grid
  .panel.panel-default
    .panel-heading.panel-title
      i.xo-icon-network(style="color: #e25440;")
      |  Interface
    .panel-body
      table.table.table-hover
        th Device
        th MAC
        th MTU
        th Network
        th Link status
        tr(ng-repeat="VIF in VM.VIFs | resolve | orderBy:natural('device') track by VIF.UUID")
          td VIF \#{{VIF.device}}
          td
            | {{VIF.MAC}}
          td
            | {{VIF.MTU}}
          td.oneliner
            | {{(VIF.$network | resolve).name_label}}
          td(ng-if="VIF.attached")
            span.label.label-success Connected
            span.pull-right.btn-group.quick-buttons
              a(tooltip="Disconnect this interface", ng-if="VM.power_state == ('Running' || 'Paused')", xo-click="disconnectVIF(VIF.UUID)")
                i.fa.fa-unlink.fa-lg
          td(ng-if="!VIF.attached")
            span.label.label-default Disconnected
            span.pull-right.btn-group.quick-buttons
              a(tooltip="Connect this interface", xo-click="connectVIF(VIF.UUID)")
                i.fa.fa-link.fa-lg
              a(tooltip="Remove this interface", xo-click="deleteVIF(VIF.UUID)")
                i.fa.fa-trash-o.fa-lg
      .text-right
        button.btn(type="button", ng-class = '{"btn-success": creatingVif, "btn-primary": !creatingVif}', ng-click="creatingVif = !creatingVif")
          i.fa.fa-plus(ng-if = '!creatingVif')
          i.fa.fa-minus(ng-if = 'creatingVif')
          |  Create Interface
      br
      form.form-inline.text-right#createInterfaceForm(ng-if = 'creatingVif', name = 'createInterfaceForm', ng-submit = 'createInterface(newInterfaceNetwork, newInterfaceMTU, autoMac, newInterfaceMAC)')
        fieldset(ng-attr-disabled = '{{ createVifWaiting ? true : undefined }}')
          .form-group
            label(for = 'newVifNetwork') Network&nbsp;
            select.form-control(ng-model = 'newInterfaceNetwork', ng-change = 'updateMTU(newInterfaceNetwork)', required, ng-options='network.name_label for network in networks')
              option(value = '', disabled) --
          | &nbsp;
          .form-group
            fieldset(ng-attr-disabled = '{{ autoMac ? true : undefined }}')
              label.control-label(for = 'newInterfaceMAC') MAC address&nbsp;
              input#newInterfaceMAC.form-control(ng-class = '{hidden: autoMac}', type = 'text', ng-model = 'newInterfaceMAC', ng-required = '!autoMac')
          | &nbsp;
          .checkbox
            label
              input(type='checkbox', ng-model = 'autoMac')
              | Auto-generate &nbsp;
          | &nbsp;
          .form-group
            label(for = 'newInterfaceMTU') MTU&nbsp;
            input#newInterfaceMTU.form-control(type = 'text', ng-model = 'newInterfaceMTU', required)
          | &nbsp;
          .form-group
            button.btn.btn-primary(type = 'submit')
              i.fa.fa-plus-square
              | Create
              span(ng-if = 'createVifWaiting')
                | &nbsp;
                i.fa.fa-spin.fa-circle-o-notch
        br
//- Snap panel
.grid
  form(editable-form="", name="vmSnap", oncancel="cancel()").panel.panel-default
    .panel-heading.panel-title
      i.xo-icon-snapshot(style="color: #e25440;")
      |  Snapshots
      span.quick-edit(tooltip="Edit snapshots", ng-click="vmSnap.$show()")
        i.fa.fa-edit.fa-fw
    .panel-body
      p.center(ng-if="!VM.snapshots.length") No snapshots
      table.table.table-hover(ng-if="VM.snapshots.length")
        th Date
        th Name
        tr(ng-repeat="snapshot in VM.snapshots | resolve | orderBy:'-snapshot_time' track by snapshot.UUID")
          td.oneliner {{snapshot.snapshot_time*1e3 | date:"medium"}}
          td.oneliner
            span(editable-text="snapshot.name_label", e-name="name_label", e-form="vmSnap", onbeforesave="saveSnapshot(snapshot.UUID, $data)")
              | {{snapshot.name_label}}
            span.pull-right.btn-group.quick-buttons
              a(tooltip="Export this snapshot", type="button", xo-click="exportVM(snapshot.UUID)")
                i.fa.fa-upload.fa-lg
              a(tooltip="Revert VM to this snapshot", xo-click="revertSnapshot(snapshot.UUID)")
                i.fa.fa-undo.fa-lg
              a(tooltip="Remove this snapshot", xo-click="deleteSnapshot(snapshot.UUID)")
                i.fa.fa-trash-o.fa-lg
      .btn-form(ng-show="vmSnap.$visible")
        p.center
          button.btn.btn-default(type="button", ng-disabled="vmSnap.$waiting", ng-click="vmSnap.$cancel()")
            i.fa.fa-times
            | Cancel
          | &nbsp;
          button.btn.btn-primary(type="submit", ng-disabled="vmSnap.$waiting", ng-click="saveChanges()")
            i.fa.fa-save
            | Save
  //- Logs panel
  .panel.panel-default
    .panel-heading.panel-title
      i.fa.fa-comments(style="color: #e25440;")
      |  Logs
      span.quick-edit(ng-if="VM.messages.length", tooltip="Remove all logs", xo-click="deleteAllLog()")
        i.fa.fa-trash-o.fa-fw
    .panel-body
      p.center(ng-if="!VM.messages.length") No recent logs
      table.table.table-hover(ng-if="VM.messages.length")
        th Date
        th Name
        tr(ng-repeat="message in VM.messages | resolve | orderBy:'-time' track by message.UUID")
          td.oneliner {{message.time*1e3 | date:"medium"}}
          td.oneliner
            | {{message.name}}
            span.pull-right.btn-group.quick-buttons
              a(xo-click="deleteLog(message.UUID)")
                i.fa.fa-trash-o.fa-lg(tooltip="Remove this log entry")
.grid
  .panel.panel-default
    .panel-heading.panel-title
      i.fa.fa-plug(style="color: #e25440;")
      |  PCI Devices
    .panel-body
      p.center(ng-if="!(VM.$container | resolve).$PCIs") No PCI devices available
      table.table.table-hover(ng-if="(VM.$container | resolve).$PCIs")
        th PCI Info
        th Device Name
        th Status
        tr(ng-repeat="pci in ((VM.$container | resolve).$PCIs | resolve) | orderBy:'pci_id' track by pci.UUID")
          td.oneliner {{pci.pci_id}} ({{pci.class_name}})
          td.oneliner {{pci.device_name}}
          td(ng-if="pci.pci_id === VM.other.pci")
            span.label.label-success Attached
            span.pull-right.btn-group.quick-buttons
              a(tooltip="Disconnect this PCI device", xo-click="disconnectPci(VM.UUID)")
                i.fa.fa-unlink.fa-lg
          td(ng-if="pci.pci_id !== VM.other.pci")
            span.label.label-default Not attached
            span.pull-right.btn-group.quick-buttons
              a(tooltip="Connect this PCI device", xo-click="connectPci(VM.UUID, pci.pci_id)")
                i.fa.fa-link.fa-lg
  .panel.panel-default
    .panel-heading.panel-title
      i.fa.fa-desktop(style="color: #e25440;")
      |  vGPUs
    .panel-body
      p.center(ng-if="!VM.$VGPus") No vGPUs available
      table.table.table-hover(ng-if="VM.$VGPus")
        th Device
        th Status
        tr(ng-repeat="vgpu in VM.$VGPUs | resolve | orderBy:'device' track by vgpu.UUID")
          td.oneliner {{vgpu.device}}
          td(ng-if="vgu.currentlyAttached")
            span.label.label-success Attached
          td(ng-if="!vgu.currentlyAttached")
            span.label.label-default Not attached

{'fraction_non_alphanumeric': 0.15418262150220913, 'fraction_numerical': 0.008895434462444772, 'mean_word_length': 1.8329856475300401, 'pattern_counts': {'":': 12, '<': 67, '<?xml version=': 0, '>': 67, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6166415', 'n_tokens_mistral': 21935, 'n_tokens_neox': 21176, 'n_words': 3256}