<%=
  component_wrapper do
    flex_layout do |details_container|
      details_container.with_row do
        flex_layout(align_items: :center, justify_content: :space_between) do |heading|
          heading.with_column(flex: 1) do
            render(Primer::Beta::Heading.new(tag: :h4)) { t("label_meeting_details") }
          end

          if @meeting.editable?
            heading.with_column do
              render(Primer::Alpha::Dialog.new(
                id: "edit-meeting-details-dialog", title: t("label_meeting_details"),
                size: :medium_portrait
              )) do |dialog|
                dialog.with_show_button(icon: :pencil, 'aria-label': t("label_meeting_details_edit"), scheme: :invisible)
                render(Meetings::Sidebar::DetailsFormComponent.new(meeting: @meeting))
              end
            end
          end
        end
      end

      details_container.with_row(mt: 2) do
        flex_layout do |details|
          details.with_row do
            render_meeting_attribute_row(:calendar) do
              render(Primer::Beta::Text.new) do
                format_date(@meeting.start_time)
              end
            end
          end

          details.with_row(mt: 2) do
            render_meeting_attribute_row(:clock) do
              flex_layout(align_items: :center) do |time|
                time.with_column do
                  render(Primer::Beta::Text.new) do
                    "#{format_time(@meeting.start_time, false)} - #{format_time(@meeting.end_time, false)}"
                  end
                end

                time.with_column(ml: 2) do
                  render(Primer::Beta::Text.new(color: :subtle, font_size: :small)) do
                    (User.current.time_zone || Time.zone).to_s[/\((.*?)\)/m, 1]
                  end
                end
              end
            end
          end

          details.with_row(mt: 2) do
            render_meeting_attribute_row(:stopwatch) do
              flex_layout do |duration|
                duration.with_column do
                  render OpenProject::Common::DurationComponent.new(@meeting.duration, :hours, abbreviated: true)
                end

                if @meeting.duration_exceeded_by_agenda_items?
                  duration.with_column(ml: 2) do
                    render(Primer::Beta::Text.new(color: :danger, font_size: :small)) do
                      "+ #{I18n.t('datetime.distance_in_words.x_minutes_abbreviated',
                                  count: @meeting.duration_exceeded_by_agenda_items_in_minutes.to_i)}"
                    end
                  end
                end
              end
            end
          end

          if @meeting.location.present?
            details.with_row(mt: 2) do
              if @meeting.location.include?("http")
                render_meeting_attribute_row(:link) do
                  render(Primer::Beta::Link.new(href: @meeting.location, target: "_blank")) do
                    render_truncated_location
                  end
                end
              else
                render_meeting_attribute_row(:location) do
                  render(Primer::Beta::Text.new) do
                    render_truncated_location
                  end
                end
              end
            end
          end

          details.with_row(mt: 2, classes: 'meeting-detail-participants', display: [nil, nil, :none]) do
            render_meeting_attribute_row(:people) do
              flex_layout do |people|
                people.with_column(mr: 2) do
                  render(Primer::Beta::Text.new) do
                    Meeting.human_attribute_name(
                      :participant,
                      count: @meeting.invited_or_attended_participants.count
                    )
                  end
                end

                people.with_column(mr: 2) do
                  render(Primer::Beta::Button.new(
                    scheme: :link,
                    underline: false,
                    tag: :a,
                    href: participants_dialog_meeting_path(@meeting),
                    data: { controller: 'async-dialog' }
                  )) do
                    t("label_meeting_show_all_participants")
                  end
                end
              end
            end
          end
        end
      end
    end
  end
%>