%script{type: "text/x-template", id: "vue-grep-pattern"}
  %div
    %a.btn.btn-xs{"v-on:click" => "add", "v-if" => "subIndex == 0"}
      = icon("fa-plus")
    %a.btn.btn-xs{"v-on:click" => "remove", "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"}