.broadcast-message-preview{ style: broadcast_message_style(@broadcast_message) }
  = icon('bullhorn')
  .js-broadcast-message-preview
    - if @broadcast_message.message.present?
      = render_broadcast_message(@broadcast_message)
    - else
      Your message here

= 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
    = f.label :message, class: 'col-form-label col-sm-2'
    .col-sm-10
      = f.text_area :message, class: "form-control js-autosize",
        required: true,
        data: { preview_path: preview_admin_broadcast_messages_path }
  .form-group.row.js-toggle-colors-container
    .col-sm-10.offset-sm-2
      = link_to 'Customize colors', '#', class: 'js-toggle-colors-link'
  .form-group.row.js-toggle-colors-container.toggle-colors.hide
    = f.label :color, "Background Color", class: 'col-form-label col-sm-2'
    .col-sm-10
      = f.color_field :color, class: "form-control"
  .form-group.row.js-toggle-colors-container.toggle-colors.hide
    = f.label :font, "Font Color", class: 'col-form-label col-sm-2'
    .col-sm-10
      = f.color_field :font, class: "form-control"
  .form-group.row
    = f.label :starts_at, _("Starts at (UTC)"), class: 'col-form-label col-sm-2'
    .col-sm-10.datetime-controls
      = f.datetime_select :starts_at, {}, class: 'form-control form-control-inline'
  .form-group.row
    = f.label :ends_at, _("Ends at (UTC)"), class: 'col-form-label col-sm-2'
    .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 btn-success"
    - else
      = f.submit "Add broadcast message", class: "btn btn-success"