#broadcast-message-preview
  = render 'preview'

= gitlab_ui_form_for [:admin, @broadcast_message], html: { class: 'broadcast-message-form js-quick-submit js-requires-input'} do |f|
  = form_errors(@broadcast_message)

  .form-group.row.mt-4
    .col-sm-2.col-form-label
      = f.label :message
    .col-sm-10
      = f.text_area :message, class: "form-control gl-form-input js-autosize js-broadcast-message-message",
        required: true,
        dir: 'auto',
        data: { preview_path: preview_admin_broadcast_messages_path }
  .form-group.row
    .col-sm-2.col-form-label
      = f.label :broadcast_type, _('Type')
    .col-sm-10
      = f.select :broadcast_type, broadcast_type_options, {}, class: 'form-control js-broadcast-message-type'
  .form-group.row.js-broadcast-message-background-color-form-group{ class: ('hidden' unless @broadcast_message.banner? ) }
    .col-sm-2.col-form-label
      = f.label :theme, _("Theme")
    .col-sm-10
      .input-group
        = f.select :theme, broadcast_theme_options, {}, class: 'form-control js-broadcast-message-theme'

  .form-group.row.js-broadcast-message-dismissable-form-group{ class: ('hidden' unless @broadcast_message.banner? ) }
    .col-sm-2.col-form-label.pt-0
      = f.label :starts_at, _("Dismissable")
    .col-sm-10
      = f.gitlab_ui_checkbox_component :dismissable, _('Allow users to dismiss the broadcast message')
  - if Feature.enabled?(:role_targeted_broadcast_messages)
    .form-group.row
      .col-sm-2.col-form-label
        = f.label :target_access_levels, _('Target roles')
      .col-sm-10
        - target_access_level_options.each do |human_access_level, access_level|
          = f.gitlab_ui_checkbox_component :target_access_levels, human_access_level, checked_value: access_level, unchecked_value: false, checkbox_options: { multiple: true }
        .form-text.text-muted
          = _('The broadcast message displays only to users in projects and groups who have these roles.')
  .form-group.row.js-toggle-colors-container.toggle-colors.hide
    .col-sm-2.col-form-label
      = f.label :font, _("Font Color")
    .col-sm-10
      = f.color_field :font, class: "form-control gl-form-input text-font-color"
  .form-group.row
    .col-sm-2.col-form-label
      = f.label :target_path, _('Target Path')
    .col-sm-10
      = f.text_field :target_path, class: "form-control gl-form-input"
      .form-text.text-muted
        = _('Paths can contain wildcards, like */welcome')
  .form-group.row
    .col-sm-2.col-form-label
      = f.label :starts_at, _("Starts at (UTC)")
    .col-sm-10.datetime-controls
      = f.datetime_select :starts_at, {}, class: 'form-control form-control-inline'
  .form-group.row
    .col-sm-2.col-form-label
      = f.label :ends_at, _("Ends at (UTC)")
    .col-sm-10.datetime-controls
      = f.datetime_select :ends_at, {}, class: 'form-control form-control-inline'
  .form-actions
    - if @broadcast_message.persisted?
      = f.submit _("Update broadcast message"), class: "btn gl-button btn-confirm"
    - else
      = f.submit _("Add broadcast message"), class: "btn gl-button btn-confirm"