%script{type: "text/x-template", id: "vue-grep-pattern"}
  %div
    %b-button{"v-on:click" => "add", "size" => "sm", "variant" => "light", "v-if" => "subIndex === 0"}
      = icon("fa-plus")
    %b-button{"v-on:click" => "remove", "size" => "sm", "variant" => "light", "v-if" => "subIndex !== 0"}
      = icon("fa-minus")
    %label
      {{ grepType | humanize }}
    .form-group
      %b-tooltip{"v-bind:target" => 'labelId("key", index, subIndex)',
                 "placement" => "right",
                 "title" => "The field name to which the regular expression is applied."}
      %label{"v-bind:id" => 'labelId("key", index, subIndex)'}
        Key
        %input.form-control{"v-bind:id" => 'inputId("key", index, subIndex)',
                            "v-bind:name" => 'inputName("key", index, subIndex)',
                            "v-model:lazy" => "key",
                            "type" => "text"}
    .form-group
      %b-tooltip{"v-bind:target" => 'labelId("pattern", index, subIndex)',
                 "placement" => "right",
                 "title" => "The regular expression"}
      %label{"v-bind:id" => 'labelId("pattern", index, subIndex)'}
        Pattern
        %input.form-control{"v-bind:id" => 'inputId("pattern", index, subIndex)',
                            "v-bind:name" => 'inputName("pattern", index, subIndex)',
                            "v-model:lazy" => "pattern",
                            "type" => "text"}