ManageIQ/manageiq-ui-classic

.col-md-12.col-lg-12
  .form-group.col-md-12
    %label
      = _("Input Parameters")
  .col-md-6
    %table.table.table-bordered.table-striped
      %tr
        %td
          %input{:type         => "text",
                 'ng-model'    => "#{ng_model}.#{prefix}_key",
                 :name         => "#{prefix}_key",
                 "placeholder" => _("Input Name"),
                 "checkchange" => ""}
          %span.help-block{"ng-show" => "#{ng_model}.#{prefix}_key === ''"}
            = _("Required")
        %td
          %select{"ng-model" => "#{ng_model}.#{prefix}_type",
                  "name"       => "#{prefix}_type",
                  'ng-options' => "v as v for v in #{ng_model}.available_datatypes",
                  'ng-change'  => '',
                  "miq-select" => true}
        %td
          %input{:type         => "text",
                 'ng-model'    => "#{ng_model}.#{prefix}_value",
                 'ng-if'       => "#{ng_model}.#{prefix}_type != 'password'",
                 :name         => "#{prefix}_value",
                 "placeholder" => _("Default value"),
                 "checkchange" => ""}
          %input{"type"        => "password",
                 :autocomplete => "off",
                 :name         => "#{prefix}_value",
                 'ng-if'       => "#{ng_model}.#{prefix}_type == 'password'",
                 'ng-model'    => "#{ng_model}.#{prefix}_value",
                 "placeholder" => placeholder_if_present("#{ng_model}.#{prefix}_value"),
                 "ng-change" => ""}
        %td{"ng-if" => "#{ng_model}.#{prefix}_key != ''"}
          %button{:class     => "btn btn-link",
                  :type      => "button",
                  "ng-click" => "vm.addKeyValue()",
                  "ng-if"    => "#{ng_model}.#{prefix}_key != ''"}
            %span{:class => "fa fa-plus tag-add"}

  #inputs_div
    .form-group
      %label.col-md-4.control-label
      .col-md-12
        %table.table.table-bordered.table-striped
          %thead
            %th
              = _("Input Name")
            %th
              = _("Data Type")
            %th
              = _("Default value")
            %th
              = _("Actions")
          %tbody
            %tr{"ng-repeat" => "arr in #{ng_model}.#{prefix}_inputs track by $index", "ng-form" => "rowForm"}
              %td{"ng-if" => "!#{ng_model}.#{prefix}_editMode || (#{ng_model}.#{prefix}_editMode && $index !== #{ng_model}.s_index)"}
                {{arr[0]}}
              %td{"ng-if" => "#{ng_model}.#{prefix}_editMode && $index === #{ng_model}.s_index"}
                %input.form-control{:type         => "text",
                                    :name         => "key",
                                    'ng-model'    => "#{ng_model}.key",
                                    "ng-change" => "",
                                    "miqrequired" => ""}
              %td{"ng-if" => "!#{ng_model}.#{prefix}_editMode || (#{ng_model}.#{prefix}_editMode && $index !== #{ng_model}.s_index)"}
                {{arr[2]}}
              %td{"ng-if" => "#{ng_model}.#{prefix}_editMode && $index === #{ng_model}.s_index"}
                %select.form-control{"ng-model"   => "#{ng_model}.key_type",
                                     "name"       => "key_type",
                                     'ng-options' => "v as v for v in #{ng_model}.available_datatypes",
                                     "ng-change"  => '',
                                     "miq-select" => true}
              %td{"ng-if" => "!#{ng_model}.#{prefix}_editMode || (#{ng_model}.#{prefix}_editMode && $index !== #{ng_model}.s_index)"}
                {{arr[2] == 'password' ? '******' : arr[1]}}
              %td{"ng-if" => "#{ng_model}.#{prefix}_editMode && $index === #{ng_model}.s_index"}
                %input.form-control{:type         => "text",
                                    :name         => "key_value",
                                    'ng-if'       => "#{ng_model}.key_type != 'password'",
                                    'ng-model'    => "#{ng_model}.key_value",
                                    "ng-change" => ""}
                %input.form-control{"type"        => "password",
                                    :autocomplete => "off",
                                    :name         => "key_value",
                                    'ng-if'       => "#{ng_model}.key_type == 'password'",
                                    'ng-model'    => "#{ng_model}.key_value",
                                    "placeholder" => placeholder_if_present("#{ng_model}.key_value"),
                                    "ng-change" => ""}

              %td.table-view-pf-select
                %div{"ng-if" => "#{ng_model}.#{prefix}_editMode && $index === #{ng_model}.s_index"}
                  %button{:class => "btn btn-link", :type => "button", "ng-disabled" => "#{ng_model}.key === ''", "ng-click" => "vm.saveKeyValue($index)"}
                    %i.pficon.pficon-save
                  %button{:class => "btn btn-link", :type => "button", "ng-click" => "vm.cancelKeyValue($index)"}
                    %i.pficon.pficon-close

                %div{"ng-if" => "!#{ng_model}.#{prefix}_editMode || (#{ng_model}.#{prefix}_editMode && $index !== #{ng_model}.s_index)", :class => "btn-container"}
                  %button{:class => "btn btn-link", :type => "button", "ng-click" => "vm.editKeyValue(this.arr[0], this.arr[1], this.arr[2], $index)", "ng-disabled" => "#{ng_model}.#{prefix}_editMode"}
                    %span{:class => "pficon pficon-edit"}
                  %button{:class => "btn btn-link", :type => "button", "ng-click" => "vm.removeKeyValue($index)", "ng-disabled" => "#{ng_model}.#{prefix}_editMode"}
                    %span{:class => "pficon pficon-delete"}