- @pagetitle = "Pulse for #{@project}"

.card
  = render(partial: 'webui/project/tabs', locals: { project: @project })

  .card-body
    .row.mb-3
      .col-sm-12.col-md-8
        %h3#range-header
          = pulse_period(@date_range)
      .col
        .dropdown.float-end
          %button.btn.btn-secondary.dropdown-toggle{ 'aria-expanded': 'false',
                                                     'data-bs-auto-close': 'outside',
                                                     'data-bs-toggle': 'dropdown',
                                                     type: 'button' }
            Change Time Range
          .dropdown-menu.dropdown-menu-end.p-4
            = link_to("Yesterday", project_pulse_path(@project, from: 1.day.ago.strftime('%Y-%m-%d')), class: 'dropdown-item')
            = link_to("1 Week", project_pulse_path(@project, from: 1.week.ago.strftime('%Y-%m-%d')), class: 'dropdown-item')
            = link_to("1 Month", project_pulse_path(@project, from: 1.month.ago.strftime('%Y-%m-%d')), class: 'dropdown-item')
            .dropdown-divider
            = form_with(url: project_pulse_path(@project), method: :get, local: true) do
              .mb-3
                %label.form-label{ for: 'from' } From
                %input.form-control#from{ type: 'date', name: 'from', value: "#{@date_range_from.strftime('%Y-%m-%d')}" }
              .mb-3
                %label.form-label{ for: 'to' } To
                %input.form-control#to{ type: 'date', name: 'to', value: "#{@date_range_to.strftime('%Y-%m-%d')}" }
              %button.btn.btn-primary{ type: 'submit' } Apply Time Range
    .row
      #pulse
        // The content of this div is set by JavaScript after the ajax call
        = render partial: 'webui/shared/loading', locals: { text: 'Loading data...' }

:javascript
  $(document).ready(function() {
    $.ajax({
      url: "#{project_pulse_path(@project, from: @date_range_from.strftime('%Y-%m-%d'), to: @date_range_to.strftime('%Y-%m-%d'))}",
      dataType: 'text',
      success: function(data) {
        $('#pulse').html(data);
      },
      error: function() {
        $('#pulse').html('<p>An error occurred while loading pulse data. Please try again.</p>');
      }
    });
  });
