script#macros-template(type="text/x-template")
  #macros
    message(:show.sync="confirmReset")
      h3(slot="header") Delete All Macros?
      div(slot="body")
        p Are you sure you want to Delete all macros?

      div(slot="footer")
        button.pure-button(@click="confirmReset=false") Cancel
        button.pure-button.button-error(@click="deleteAllMacros")
          | Delete All

    message(:show.sync="confirmSave")
        h3(slot="header") Confirm Save?
        div(slot="body")
            p Are you sure you want to save the current settings?
            
        div(slot="footer")
          button.pure-button(@click="confirmSave=false") Cancel
          button.pure-button.pure-button-primary(@click="saveMacros") Confirm

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

    message(:show.sync="deleteSelected")
        h3(slot="header") Delete Selected Macros?
        p(slot="body")
        div(slot="footer")
          button.pure-button(@click="deleteSelected = false") Cancel
          button.pure-button.button-error(@click="deleteSelectedMacros")
            .fa.fa-trash
            |  Yes

    message(:show.sync="maxLimitReached")
        h3(slot="header") Alert
        div(slot="body")
            p You have reached the maximum macros limit
        div(slot="footer")
          button.pure-button.button-submit(@click="maxLimitReached = false") OK
    
    message(:show.sync="sameName")
        h3(slot="header") A macro with this name already exists.
        div(slot="body")
            p Please choose a different name.
        div(slot="footer")
          button.pure-button.button-submit(@click="sameName = false") OK

    message(:show.sync="addMacros")
        h3(slot="header") Do you need to add another macros?
        p(slot="body")
        div(slot="footer")
          button.pure-button(@click="addMacros = false") Cancel
          button.pure-button.button-submit(@click="addNewMacros") Add

    h1 Macros Configuration
    .flex-row-container
        button.config-button.button-blue(title="Reset Macros", @click="confirmReset=true") Delete All
        button.config-button.button-blue(title="Add a Macros", @click="addMacros=true", style="margin-left:5px") New Macros
        button.config-button.button-blue(title="Delete a Macros", @click="deleteSelected=true", style="margin-left:5px",:disabled="!macrosLength") Delete Selected

    .warning-box
        p
                u  Note:
                |  Select a Macros to edit its settings.

    .tabs
        div(style="display:flex;align-items:center;margin-left:30px")
                h2 Select Macros
                select(id="macros-select",title="Select a Macros to edit.",selected
                                                v-model="tab",@change="clearMacros",
                                                style="width:250px;height:50px;border-radius:10px;padding-left:15px;font-weight:bold;margin-left:30px")
                                                option( selected='' value='0')  Select a Macros
                                                option(v-for="(index,file) in macrosList", :value="index+1") {{file}}
        .macros-form
                        p.title Macros Name
                        .input-container
                                input.input-color(type="color",id="macros-color",value="#ffffff",@change="editedColor") 
                                input.input-name(type="text",minlength='1',maxlength='15',id="macros-name" ,v-model="macrosName",@change="editedName")
                        p.title Macros G-Code
                        .flex-row-container                      
                                select(id="gcode-select",title="Select previously uploaded GCode programs.",selected
                                        v-model="fileName",@change="loadMacrosGcode", :disabled="!is_ready",
                                        style="max-width:100%;height:40px;border-radius:5px")
                                        option( selected='' value='default')  Create G-Code
                                        option(v-for="file in macrosGCodeList", :value="file") {{file}}

                                button.config-button.button-blue(title="Upload a new GCode program.", @click="open",
                                        :disabled="!is_ready") Upload
                                        .fa.fa-upload

                                form.gcode-file-input.file-upload
                                        input(type="file", @change="uploadMacrosGcode", :disabled="!is_ready",
                                        accept=".nc,.ngc,.gcode,.gc")
                                button.config-button.button-blue(title="Delete Macros GCode",@click="deleteGCode = true",
                                        :disabled="!fileName =='default'") Delete
                                        .fa.fa-trash
                        br
                        .gcodeContainer
                                textarea.new-gcode(id="gcode-field", v-model="newGcode" ,@keypress="updateNewGcode")

        button.submit-macros.button-success(title="Save Macros",@click="confirmSave=true",:disabled="!edited") Save
        button.submit-macros(title="Cancel Macros",@click="clearMacros",style="margin-left:5px;background-color:#fafafa;",:disabled="initial_tab") Cancel