<Boxel::Modal
  class="network-problem-modal"
  @size="small"
  @isOpen={{@isOpen}}
  @onClose={{@onClose}}
  @layer="urgent"
  data-test-network-problem-modal
  data-test-network-problem-modal-dismissable={{@dismissable}}
>
  <div
    class="network-problem-modal__scroll-wrapper"
    {{focus-trap
      focusTrapOptions=(hash
        allowOutsideClick=@dismissable
        clickOutsideDeactivates=@dismissable
      )
    }}
  >
    <Boxel::CardContainer
      class="network-problem-modal__card"
      tabindex="-1"
    >
      <header class="network-problem-modal__card-title">
          {{svg-jar "warning" class="network-problem-modal__card-title-icon" width="30" height="30"}}
          <div class="network-problem-modal__card-title-content" data-test-network-problem-modal-title>
            {{@title}}
          </div>
      </header>
      <div data-test-network-problem-modal-body>
        {{@body}}
      </div>
      <div>
        <Boxel::Button @kind="primary" {{on "click" (optional @action)}} data-test-network-problem-modal-action>{{@actionText}}</Boxel::Button>
        <Boxel::Button @kind="secondary" {{on "click" this.openDiscord}}>Contact Cardstack Support</Boxel::Button>
      </div>
    </Boxel::CardContainer>
  </div>
</Boxel::Modal>
