= gitlab_ui_form_for [@project, @schedule], as: :schedule, html: { id: "new-pipeline-schedule-form", class: "js-pipeline-schedule-form pipeline-schedule-form" } do |f|
  = form_errors(@schedule, pajamas_alert: true)
  .form-group.row
    .col-md-9
      = f.label :description, _('Description'), class: 'label-bold'
      = f.text_field :description, class: 'form-control gl-form-input', required: true, autofocus: true, placeholder: s_('PipelineSchedules|Provide a short description for this pipeline')
  .form-group.row
    .col-md-9
      = f.label :cron, _('Interval Pattern'), class: 'label-bold'
      #interval-pattern-input{ data: { initial_interval: @schedule.cron, daily_limit: @schedule.daily_limit } }
  .form-group.row
    .col-md-9
      = f.label :cron_timezone, _('Cron Timezone'), class: 'label-bold'
      = dropdown_tag(_("Select a timezone"), options: { toggle_class: 'gl-button btn btn-default js-timezone-dropdown w-100', dropdown_class: 'w-100', title: _("Select a timezone"), filter: true, placeholder: s_("OfSearchInADropdown|Filter"), data: { data: timezone_data } } )
      = f.text_field :cron_timezone, value: @schedule.cron_timezone, id: 'schedule_cron_timezone', class: 'hidden', name: 'schedule[cron_timezone]', required: true
  .form-group.row
    .col-md-9
      = f.label :ref, _('Target branch or tag'), class: 'label-bold'
      %div{ data: { testid: 'schedule-target-ref' } }
        .js-target-ref-dropdown{ data: { project_id: @project.id, default_branch: @project.default_branch } }
      = f.text_field :ref, value: @schedule.ref, id: 'schedule_ref', class: 'hidden', name: 'schedule[ref]', required: true
  .form-group.row.js-ci-variable-list-section
    .col-md-9
      %label.label-bold
        #{ s_('PipelineSchedules|Variables') }
      %ul.ci-variable-list
        - @schedule.variables.each do |variable|
          = render 'ci/variables/variable_row', form_field: 'schedule', variable: variable
        = render 'ci/variables/variable_row', form_field: 'schedule'
      - if @schedule.variables.size > 0
        = render Pajamas::ButtonComponent.new(category: :secondary, variant: :confirm, button_options: { class: 'gl-mt-3 js-secret-value-reveal-button', data: { secret_reveal_status: "#{@schedule.variables.size == 0}" }}) do
          - if @schedule.variables.size == 0
            = n_('Hide value', 'Hide values', @schedule.variables.size)
          - else
            = n_('Reveal value', 'Reveal values', @schedule.variables.size)
  .form-group.row
    .col-md-9
      = f.label :active, s_('PipelineSchedules|Activated'), class: 'label-bold'
      %div
        = f.gitlab_ui_checkbox_component :active, _('Active'), checkbox_options: { value: @schedule.active, required: false }
  .footer-block
    = f.submit _('Save pipeline schedule'), class: 'btn gl-button btn-confirm'
    = link_to _('Cancel'), pipeline_schedules_path(@project), class: 'btn gl-button btn-default btn-cancel'