<div
  class="session-offerings-list"
  {{did-insert (perform this.load)}}
  {{did-update (perform this.load) @session}}
  data-test-session-offerings-list
>
  {{#each this.offeringBlocks as |block|}}
    <div class="offering-block">
      <div class="offering-block-date">
        <span class="offering-block-date-dayofweek">
          {{format-date block.date weekday="long"}}
        </span>
        <span class="offering-block-date-dayofmonth">
          {{format-date block.date month="long" day="numeric"}}
        </span>
      </div>
      {{#each block.offeringTimeBlocks as |offeringTimeBlock|}}
        <div class="offering-block-time">
          {{#if offeringTimeBlock.isMultiDay}}
            <div class="offering-block-time-time">
              <div class="offering-block-time-time-starts">
                <label class="offering-block-time-time-starts-label">
                  {{t "general.starts"}}:
                </label>
                {{format-date offeringTimeBlock.startDate weekday="long" month="long" day="numeric" hour="numeric" minute="numeric"}}
              </div>
              <div class="offering-block-time-time-ends">
                <label class="offering-block-time-time-ends-label">
                  {{t "general.ends"}}:
                </label>
                {{format-date offeringTimeBlock.endDate weekday="long" month="long" day="numeric" hour="numeric" minute="numeric"}}
              </div>
            </div>
          {{else}}
            <div class="offering-block-time-time">
              <span class="offering-block-time-time-starttime">
                <label class="offering-block-time-time-starttime-label">
                  {{t "general.starts"}}:
                </label>
                {{format-date offeringTimeBlock.startDate hour="numeric" minute="numeric"}}
              </span>
              <span class="offering-block-time-time-endtime">
                <label class="offering-block-time-time-endtime-label">
                  {{t "general.ends"}}:
                </label>
                {{format-date offeringTimeBlock.endDate hour="numeric" minute="numeric"}}
              </span>
            </div>
          {{/if}}
          <SessionOfferingsTimeBlockOfferings
            @offeringTimeBlock={{offeringTimeBlock}}
            @removeOffering={{this.removeOffering}}
            @editable={{@editable}}
          />
        </div>
      {{/each}}
    </div>
  {{/each}}
  {{#unless (is-array this.offeringBlocks)}}
    <LoadingSpinner />
  {{/unless}}
</div>
