= gitlab_ui_form_for @label, as: :label, url: url, html: { class: 'label-form js-quick-submit js-requires-input' } do |f| = form_errors(@label) .form-group.row .col-12 = f.label :title = f.text_field :title, class: "gl-form-input form-control js-label-title", required: true, autofocus: true, data: { qa_selector: 'label_title_field' } = render_if_exists 'shared/labels/create_label_help_text' .form-group.row .col-12 = f.label :description, _("Description (optional)") = f.text_area :description, class: "gl-form-input form-control js-quick-submit", rows: 4, data: { qa_selector: 'label_description_field' } .form-group.row .col-12 = f.label :color, _("Background color") .input-group .input-group-prepend %input.label-color-preview.gl-w-7.gl-h-full.gl-border-1.gl-border-solid.gl-border-gray-500.gl-border-r-0.gl-rounded-top-right-none.gl-rounded-bottom-right-none{ type: "color", placeholder: _('Select color') } = f.text_field :color, class: "gl-form-input form-control", data: { qa_selector: 'label_color_field' } .form-text.text-muted = _('Select a color from the color picker or from the presets below.') = render_suggested_colors .gl-display-flex.gl-justify-content-space-between %div - if @label.persisted? = f.submit _('Save changes'), class: 'js-save-button gl-mr-2', pajamas_button: true - else = f.submit _('Create label'), class: 'js-save-button gl-mr-2', data: { qa_selector: 'label_create_button' }, pajamas_button: true = render Pajamas::ButtonComponent.new(href: back_path) do = _('Cancel') - if @label.persisted? - presented_label = @label.present = render Pajamas::ButtonComponent.new(variant: :danger, category: :secondary, button_options: { class: 'js-delete-label-modal-button', data: { label_name: presented_label.name, subject_name: presented_label.subject_name, destroy_path: presented_label.destroy_path } }) do = _('Delete')