script#control-view-template(type="text/x-template")
  #control
    message(:show.sync="showGcodeMessage")
      h3(slot="header") Processing New File

      div(slot="body")
        h3 Please wait..
        p Simulating GCode to check for errors, calculate ETA and generate 3D view.
        
      div(slot="footer")
        label Simulating {{(toolpath_progress || 0) | percent}}

    table(style="table-layout: fixed; width: 100%;")
      tr(style="height: fit-content;")
        td(style="white-space: nowrap; width: 410px;", rowspan="2")
          table.control-buttons(table-layout="fixed")
            colgroup
               col(style="width:100px")
               col(style="width:100px")
               col(style="width:100px")
               col(style="width:100px")
            tr
              td(style="height:100px",align="center")
                button(@click="jog_fn(-1,1,0,0)")
                  .fa.fa-arrow-right(style="transform: rotate(-135deg);")
              td(style="height:100px",align="center")
                button(@click="jog_fn(0,1,0,0)") Y+
              td(style="height:100px",align="center")
                button(@click="jog_fn(1,1,0,0)")
                  .fa.fa-arrow-right(style="transform: rotate(-45deg);")
              td(style="height:100px",align="center")
                button(,@click="jog_fn(0,0,1,0)") Z+
            tr
              td(style="height:100px",align="center")
                button(@click="jog_fn(-1,0,0,0)") X-
              td(style="height:100px",align="center")
                button(@click="showMoveToZeroDialog('xy')")
                  .fa.fa-bullseye(style="font-size: 173%")
              td(style="height:100px",align="center")
                button(@click="jog_fn(1,0,0,0)") X+
              td(style="height:100px",align="center")
                button(@click="showMoveToZeroDialog('z')") Z0
            tr
              td(style="height:100px",align="center")
                button(@click="jog_fn(-1,-1,0,0)")
                  .fa.fa-arrow-right(style="transform: rotate(135deg);")
              td(style="height:100px",align="center")
                button(@click="jog_fn(0,-1,0,0)") Y-
              td(style="height:100px",align="center")
                button(@click="jog_fn(1,-1,0,0)")
                  .fa.fa-arrow-right(style="transform: rotate(45deg);")
              td(style="height:100px",align="center")
                button(@click="jog_fn(0,0,-1,0)") Z-
            tr
              td(style="height:100px",align="center")
                button(:style="getJogIncrStyle('fine')", @click="jog_incr = 'fine'")
                  span {{jog_incr_amounts[display_units].fine}}#[span.jog-units {{metric ? 'mm' : 'in'}}]
              td(style="height:100px",align="center")
                button(:style="getJogIncrStyle('small')", @click="jog_incr = 'small'")
                  span {{jog_incr_amounts[display_units].small}}#[span.jog-units {{metric ? 'mm' : 'in'}}]
              td(style="height:100px",align="center")
                button(:style="getJogIncrStyle('medium')", @click="jog_incr = 'medium'")
                  span {{jog_incr_amounts[display_units].medium}}#[span.jog-units {{metric ? 'mm' : 'in'}}]
              td(style="height:100px",align="center")
                button(:style="getJogIncrStyle('large')", @click="jog_incr = 'large'")
                  span {{jog_incr_amounts[display_units].large}}#[span.jog-units {{metric ? 'mm' : 'in'}}]
            tr
              td(style="height:100px", align="center", colspan="2")
                button(:class="state['pw'] ? '' : 'load-on'",
                  style="height:100px;width:200px",
                  @click="showProbeDialog('xyz')")
                  | Probe XYZ

              td(style="height:100px", align="center", colspan="2")
                button(:class="state['pw'] ? '' : 'load-on'",
                  style="height:100px;width:200px",
                  @click="showProbeDialog('z')")
                  | Probe Z

        td(style="vertical-align: top;")
          table.axes
            tr(:class="axes.klass")
              th.name Axis
              th.position Position
              th.absolute Absolute
              th.offset Offset
              th.state State
              th.tstate Toolpath
              th.actions
                button.pure-button(disabled, style="height:60px;width:60px;display:none;")

                button.pure-button(:disabled="!can_set_axis",
                  title="Zero all axis offsets.", @click="zero()",style="height:60px;width:60px")
                  .fa.fa-map-marker

                button.pure-button(title="Home all axes.", @click="home()",
                  :disabled="!is_idle",style="height:60px;width:60px")
                  .fa.fa-home
            
            each axis in 'xyzabc'
              tr.axis(:class=`${axis}.klass`, v-if=`${axis}.enabled`,
                :title=`${axis}.title`)
                th.name= axis
                td.position: unit-value(:value=`${axis}.pos`, precision=4)
                td.absolute: unit-value(:value=`${axis}.abs`, precision=3)
                td.offset: unit-value(:value=`${axis}.off`, precision=3)
                td.state
                  .fa(:class=`'fa-' + ${axis}.icon`)
                  | {{#{axis}.state}}
                td.tstate(:class=`${axis}.tklass`, :title=`${axis}.toolmsg`, @click=`showToolpathMessageDialog('${axis}')`)
                  .fa(:class=`'fa-' + ${axis}.ticon`)
                  | {{#{axis}.tstate}}

                th.actions
                  button.pure-button(:disabled="!can_set_axis",
                    title=`Set {{'${axis}' | upper}} axis position.`,
                    @click=`show_set_position('${axis}')`, style="height:60px;width:60px")
                    .fa.fa-cog

                  button.pure-button(:disabled="!can_set_axis",
                    title=`Zero {{'${axis}' | upper}} axis offset.`,
                   @click=`zero('${axis}')`, style="height:60px;width:60px")
                    .fa.fa-map-marker

                  button.pure-button(:disabled="!is_idle", @click=`home('${axis}')`,
                    title=`Home {{'${axis}' | upper}} axis.`, style="height:60px;width:60px")
                    .fa.fa-home

      
      tr(style="vertical-align: top;")
        td
          table(width="100%")
            tr
              td(style="text-align:center")
                table.info
                  tr
                    th State
                    td(:class="{attention: highlight_state}") {{mach_state}}

                  tr
                    th Message
                    td.message(:class="{attention: highlight_state}")
                      | {{message.replace(/^#/, '')}}

                  tr
                    th Display Units
                    td.units
                      select(v-model="display_units")
                        option(value="METRIC") METRIC
                        option(value="IMPERIAL") IMPERIAL

                  tr(title="Active tool")
                    th Tool
                    td {{state.tool || 0}}

              td
                table.info
                  tr(
                    title="Current velocity in {{metric ? 'meters' : 'inches'}} per minute")
                    th Velocity
                    td
                      unit-value(:value="state.v", precision="2", unit="", iunit="",
                        scale="0.0254")
                      | {{metric ? ' m/min' : ' IPM'}}

                  tr(title="Programmed feed rate.")
                    th Feed
                    td
                      unit-value(:value="state.feed", precision="2", unit="", iunit="")
                      | {{metric ? ' mm/min' : ' IPM'}}

                  tr(title="Programed and actual speed.")
                    th Speed
                    td
                      | {{state.speed || 0 | fixed 0}}
                      span(v-if="!isNaN(state.s)")  ({{state.s | fixed 0}})
                      = ' RPM'

                  tr(title="Load switch states.")
                    th Loads
                    td
                      span(:class="state['1oa'] ? 'load-on' : ''")
                        | 1:{{state['1oa'] ? 'On' : 'Off'}}
                      |  
                      span(:class="state['2oa'] ? 'load-on' : ''")
                        | 2:{{state['2oa'] ? 'On' : 'Off'}}

              td
                table.info
                  tr
                    th Current Time
                    td
                      span {{current_time}}

                  tr
                    th Remaining
                    td(title="Total run time (days:hours:mins:secs)").
                      #[span(v-if="plan_time_remaining") {{plan_time_remaining | time}} of]
                      {{toolpath.time | time}}
                  tr
                    th ETA
                    td.eta {{eta}}

                  tr
                    th Progress
                    td.progress
                      label {{(progress || 0) | percent}}
                      .bar(:style="'width:' + (progress || 0) * 100 + '%'")

    .macros-div(class="present")
       button.macros-buttons(title="Click to run Macros 1", @click="runMacros(0)",
            :disabled="!is_ready",v-bind:style="{ backgroundColor: config.macros[0].color }") {{config.macros[0].name}}
       button.macros-buttons(title="Click to run Macros 2", @click="runMacros(1)",
            :disabled="!is_ready",v-bind:style="{ backgroundColor: config.macros[1].color }") {{config.macros[1].name}}
       button.macros-buttons(title="Click to run Macros 3", @click="runMacros(2)",
            :disabled="!is_ready",v-bind:style="{ backgroundColor: config.macros[2].color }") {{config.macros[2].name}}
       button.macros-buttons(title="Click to run Macros 4", @click="runMacros(3)",
            :disabled="!is_ready",v-bind:style="{ backgroundColor: config.macros[3].color }") {{config.macros[3].name}}
       button.macros-buttons(title="Click to run Macros 5", @click="runMacros(4)",
            :disabled="!is_ready",v-bind:style="{ backgroundColor: config.macros[4].color }") {{config.macros[4].name}}
       button.macros-buttons(title="Click to run Macros 6", @click="runMacros(5)",
            :disabled="!is_ready",v-bind:style="{ backgroundColor: config.macros[5].color }") {{config.macros[5].name}}
       button.macros-buttons(title="Click to run Macros 7", @click="runMacros(6)",
            :disabled="!is_ready",v-bind:style="{ backgroundColor: config.macros[6].color }") {{config.macros[6].name}}
       button.macros-buttons(title="Click to run Macros 8", @click="runMacros(7)",
            :disabled="!is_ready",v-bind:style="{ backgroundColor: config.macros[7].color }") {{config.macros[7].name}}


    .tabs
     
      input#tab1(type="radio", name="tabs",checked="" @click="tab = 'auto'")
      label(for="tab1", title="Run GCode programs",style="height:50px;width:100px") Auto

      input#tab2(type="radio", name="tabs", @click="tab = 'mdi'")
      label(for="tab2", title="Manual GCode entry",style="height:50px;width:100px") MDI

      input#tab3(type="radio", name="tabs", @click="tab = 'messages'")
      label(for="tab3",style="height:50px;width:100px") Messages

      input#tab4(type="radio", name="tabs", @click="tab = 'indicators'")
      label(for="tab4",style="height:50px;width:100px") Indicators



      
      section#content1.tab-content.pure-form
        .toolbar.pure-control-group
          button.pure-button(:class="{'attention': is_holding}",
            title="{{is_running ? 'Pause' : 'Start'}} program.",
            @click="start_pause", :disabled="!state.selected",
            style="height:100px;width:100px;font-weight:normal")
            .fa(:class="is_running ? 'fa-pause' : 'fa-play'")

          button.pure-button(title="Stop program.", @click="stop", style="height:100px;width:100px;font-weight:normal")
            .fa.fa-stop

          button.pure-button(title="Pause program at next optional stop (M1).",
            @click="optional_pause", v-if="false", style="height:100px;width:100px;font-weight:normal")
            .fa.fa-stop-circle-o

          button.pure-button(title="Execute one program step.", @click="step",
            :disabled="(!is_ready && !is_holding) || !state.selected",
            v-if="false", style="height:100px;width:100px;font-weight:normal")
            .fa.fa-step-forward

          button.pure-button(title="Upload a new GCode program.", @click="open",
            :disabled="!is_ready",style="height:100px;width:100px;font-weight:normal")
            .fa.fa-folder-open

          form.gcode-file-input.file-upload
            input(type="file", @change="upload", :disabled="!is_ready",
              accept=".nc,.ngc,.gcode,.gc")

          a(:disabled="!state.selected", download,
              :href="'/api/file/' + state.selected",
              title="Download the selected GCode program.")
            button.pure-button(:disabled="!state.selected", style="height:100px;width:100px")
              .fa.fa-download

          button.pure-button(title="Delete current GCode program.",
            @click="deleteGCode = true",
            :disabled="!state.selected || !is_ready",style="height:100px;width:100px;font-weight:normal")
            .fa.fa-trash

          message(:show.sync="deleteGCode")
            h3(slot="header") Delete GCode?
            p(slot="body")
            div(slot="footer")
              button.pure-button(@click="deleteGCode = false") Cancel
              button.pure-button.button-error(@click="delete_all")
                .fa.fa-trash
                |  all
              button.pure-button.button-success(@click="delete_current")
                .fa.fa-trash
                |  selected

          select(title="Select previously uploaded GCode programs.",
            v-model="state.selected", @change="load", :disabled="!is_ready",
            style="max-width:100%")
            option(v-for="file in gcode_files", :value="file") {{file}}

          .progress(v-if="toolpath_progress && toolpath_progress < 1",
            title="Simulating GCode to check for errors, calculate ETA and " +
              "generate 3D view.  You can run GCode before the simulation " +
              "finishes.")
            div(:style="'width:' + (toolpath_progress || 0) * 100 + '%'")
              label Simulating {{(toolpath_progress || 0) | percent}}

        path-viewer(:toolpath="toolpath", :state="state", :config="config")
        gcode-viewer

      section#content2.tab-content
        .mdi.pure-form(title="Manual GCode entry.")
          button.pure-button(:disabled="!can_mdi",
            :class="{'attention': is_holding}",
            title="{{is_running ? 'Pause' : 'Start'}} command.",
            @click="mdi_start_pause",style="height:100px;width:100px")
            .fa(:class="is_running ? 'fa-pause' : 'fa-play'")

          button.pure-button(title="Stop command.", @click="stop",style="height:100px;width:100px")
            .fa.fa-stop

          input(v-model="mdi", :disabled="!can_mdi", @keyup.enter="submit_mdi")

        div
          em The machine is currently operating in #[strong {{mach_units}}] units.  Use G20/G21 to switch units.

        .history(:class="{placeholder: !history}")
          span(v-if="!history.length") MDI history displays here.
          ul
            li(v-for="item in history", @click="load_history($index)",
               track-by="$index")
              | {{item}}

      section#content3.tab-content
        console

      section#content4.tab-content
        indicators(:state="state", :template="template")

    .override(title="Feed rate override.")
      label Feed
      input(type="range", min="0", max="2", step="0.01",
        v-model="feed_override", @change="override_feed")
      span.percent {{feed_override | percent 0}}

    .override(title="Spindle speed override.")
      label Speed
      input(type="range", min="0", max="2", step="0.01",
        v-model="speed_override", @change="override_speed")
      span.percent {{speed_override | percent 0}}