script#macros-template(type="text/x-template")
  #macros
    message(:show.sync="macroFound")
        h3(slot="header") Alert
        div(slot="body")
            p 
            | The file 
            strong {{macroFoundGcode}}
            |  is currently being used by macro 
            strong {{macroFoundName}}
            | . You need to re-select a file for the macro.
        div(slot="footer")
          button.pure-button(@click="macroFound = false") Cancel
          button.pure-button.button-error(@click="delete_current")
            .fa.fa-trash
            |  Delete Anyway

    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="GCodeNotFound")
        h3(slot="header") File not found
        div(slot="body")
            p It seems like the file you selected cannot be found.
        div(slot="footer")
          button.pure-button.button-error(@click="removeFromList")
            .fa.fa-trash
            |  Remove

    h1 Macros Configuration
    .flex-row-container
        button.config-button.button-blue(title="Reset Macros", @click="confirmReset=true") Reset 

        message(:show.sync="confirmReset")
          h3(slot="header") Reset Macros?
          div(slot="body")
            p Are you sure you want to reset all macros?
          div(slot="footer")
            button.pure-button(@click="confirmReset=false") Cancel
            button.pure-button.button-error(@click="delete_all_macros")
              | Reset
              
        button.config-button.button-blue(title="Add a Macros", @click="addMacros=true") New Macro

        message(:show.sync="addMacros")
          div(slot="header") 
          div(slot="body")
            p Do you need to add another macro?
          div(slot="footer")
            button.pure-button(@click="addMacros = false") Cancel
            button.pure-button.button-submit(@click="add_new_macro") Add
            
        button.config-button.button-blue(title="Delete a Macros", @click="deleteSelected=true", style="width:210px") Delete Selected Macro

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

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

    .tabs
        div(style="display:flex;align-items:center;margin-left:30px")
                h2 Select Macro
                select(id="macros-select",title="Select a Macro to edit.",selected
                                                v-model="tab",@change="load_macro",
                                                style="width:250px;height:50px;border-radius:10px;padding-left:15px;font-weight:bold;margin-left:30px")
                                                option( selected='' value='0')  Select a Macro
                                                option(v-for="(index,file) in macros_list", :value="index+1") {{file}}
        .macros-form
                        p.title Macro 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",@keydown="editedName")
                        div
                          input.input-alert(type="checkbox",id="macros-alert" v-model="isChecked",@change="editedAlert")
                          label Would you like an alert when running this macro?
                        p.title Macro G-Code
                        .flex-row-container                      
                                select(id="gcode-select",title="Select previously uploaded GCode programs.",selected
                                        v-model="fileName",@change="load", :disabled="!is_ready",
                                        style="max-width:100%;height:40px;border-radius:5px;margin-right:10px")
                                        option( selected='' value='default')  Create G-Code
                                        option(v-for="file in macros_gcode_list", :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="upload", :disabled="!is_ready",
                                        accept=".nc,.ngc,.gcode,.gc")

                                button.config-button.button-blue(title="Delete Macro GCode",@click="deleteGCode = true",
                                        :disabled="!fileName =='default'") Delete
                                        .fa.fa-trash
                                message(:show.sync="deleteGCode")
                                  h3(slot="header") Delete G-Code?
                                  p(slot="body")
                                  div(slot="footer")
                                    button.pure-button(@click="deleteGCode = false") Cancel
                                    button.pure-button.button-error(@click="check_gcode_with_macro")
                                      .fa.fa-trash
                                      |  Selected

                        br
                        .gcodeContainer
                                textarea.new-gcode(id="gcode-field", v-model="newGcode" ,@keypress="update_new_gcode")

        button.submit-macros.button-success(title="Save Macro",@click="confirmSave=true",:disabled="!edited") Save
        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="save_macro") Confirm

        button.submit-macros(title="Cancel Macro",@click="load_macro",style="margin-left:5px;background-color:#fafafa;",:disabled="initial_tab") Cancel