<%=
  content_tag("turbo-frame", id: "work-package-meetings-tab-content") do
    component_wrapper do
      flex_layout(test_selector: 'op-work-package-meetings-tab-container') do |flex|
        flex.with_row do
          render(WorkPackageMeetingsTab::HeadingComponent.new(work_package: @work_package))
        end
        flex.with_row(mt: 3) do
          render(Primer::Alpha::TabNav.new(label: "label")) do |component|
            component.with_tab(selected: @direction == :upcoming,
                               href: work_package_meetings_tab_index_path(@work_package,
                                                                          direction: :upcoming)) do |tab|
              tab.with_text { t("label_upcoming_meetings_short") }
              tab.with_counter(count: @upcoming_meetings_count, test_selector: 'op-upcoming-meetings-counter')
            end
            component.with_tab(selected: @direction == :past,
                               href: work_package_meetings_tab_index_path(@work_package,
                                                                          direction: :past)) do |tab|
              tab.with_text { t("label_past_meetings_short") }
              tab.with_counter(count: @past_meetings_count, test_selector: 'op-past-meetings-counter')
            end
          end
        end
        flex.with_row do
          render(WorkPackageMeetingsTab::ListComponent.new(
            agenda_items_grouped_by_meeting: @agenda_items_grouped_by_meeting,
            direction: @direction
          ))
        end
      end
    end
  end
%>