= form_for task, method: task.new_record? ? :post : :patch, html: { enctype: 'multipart/form-data' } do |f|
  .row
    - if task.errors.any?
      .col-12.text-danger.mt-3= task.errors.full_messages.join("\n")

    .col
      .mb-3.mt-4= f.text_field :title, { class: 'form-control', placeholder: 'Title', required: true }
      .mb-3.mt-4= f.text_area :description, { class: 'form-control', placeholder: 'Description', rows: 10 }
    - if show_form_sidebar?(task)
      .col-4
        - unless in_solo_mode?
          %h5.mb-2.mt-4.section-title Reviewers
          #reviewers.mb-3
            - if reviewers.any?
              = f.collection_select :task_review_ids, reviewers, :id, :name, { selected: task.reviewer_ids }, { multiple: true, class: 'select2 col-12' }
            - else
              %p.small.text-muted Nobody can be added
        %h5.mb-2.mt-4.section-title
          Labels
          .float-end
            = link_to '#', class: 'text-primary', 'data-bs-target': '#newLabelModalForm', 'data-bs-toggle': "modal" do
              %i.bi.bi-plus-circle.me-1
              Add
        #labels.mb-3
          = render partial: 'label_collection_select', locals: { selected_label_ids: task.label_ids }
        - if RailsExecution.configuration.task_schedulable
          %h5.mb-2.mt-4.section-title
            Scheduler
            %i.bi.bi-clock-fill.me-1.pointer-events
            %a{:href => "#", id: "clear-schedule-btn"} clear
          = f.datetime_local_field :scheduled_at, class: "form-control", placeholder: "Select Datetime"
          = f.select :repeat_mode, options_for_select(task.repeat_mode_select_options.invert, f.object.repeat_mode), {}, class: "form-control", disabled: !task.scheduled_at?
        - if RailsExecution.configuration.file_upload
          .mt-4= render partial: 'attachments', locals: { task_attachment_files: }
          #attachment_files.mb-3
            %ul.list-unstyled= render partial: 'attachment_file_fields'

            .mt-3.text-center
              %hr.smoothly
              = link_to 'More file', '#add-more-file', data: { fields_html: render(partial: 'attachment_file_fields') }, class: 'btn text-primary', id: 'js-add-more-file'

    - if task.new_record? || task.in_processing?
      .col-md-12.mb-3.mt-3
        .row
          .col
            %h5.section-title Script
          .col.text-end= render partial: 'tips'
        = f.text_area :script, { class: 'form-control hidden', rows: 3, id: 'main-script' }
        #script-editor-container
          #script-editor= task.script
          = link_to '#full-screen', class: 'btn', id: 'click2full' do
            %i.bi.bi-arrows-fullscreen
            %i.bi.bi-arrows-angle-contract

  .mb-3.mt-3.text-end
    %hr
    = f.submit (task.new_record? ? 'Create' : 'Update'), class: 'btn btn-success'

= render partial: 'form_scripts', locals: { task: task }
= render partial: 'new_label_modal_form'

:javascript
  $(document).ready(function() {
    $('#task_scheduled_at').change(function() {
      var scheduledAtValue = $(this).val();
      var modeSelect = $('#task_repeat_mode');
      modeSelect.prop('disabled', false);

      var scheduledDate = new Date(scheduledAtValue);
      var currentMinutes = scheduledDate.getMinutes().toString().padStart(2, '0');
      var currentHours = scheduledDate.getHours().toString().padStart(2, '0');
      var currentDayOfWeek = scheduledDate.toLocaleDateString('en-US', { weekday: 'long' });
      var currentDayOfMonth = scheduledDate.getDate();
      var currentMonth = scheduledDate.toLocaleDateString('en-US', { month: 'long' });

      modeSelect.find('option[value="hourly"]').text(`Hourly at minute ${scheduledDate.getMinutes()}`);
      modeSelect.find('option[value="daily"]').text(`Daily at ${currentHours}:${currentMinutes}`);
      modeSelect.find('option[value="weekly"]').text(`Weekly on ${currentDayOfWeek} at ${currentHours}:${currentMinutes}`);
      modeSelect.find('option[value="monthly"]').text(`Monthly on ${currentDayOfMonth} at ${currentHours}:${currentMinutes}`);
      modeSelect.find('option[value="annually"]').text(`Annually on  ${currentMonth} ${currentDayOfMonth} at ${currentHours}:${currentMinutes}`);
      modeSelect.find('option[value="weekdays"]').text(`Every weekday (Monday to Friday) at ${currentHours}:${currentMinutes}`);
    });

    $('#clear-schedule-btn').on('click', function() {
      $('#task_scheduled_at').val('');

      var modeSelect = $('#task_repeat_mode');
      modeSelect.val('none');
      modeSelect.prop('disabled', true);
    });
  });