{{page-title "Card Space" replace=true}}

<main class="card-space">
  <Boxel::LeftEdgeNav
    class="card-space-left-edge"
    @home={{hash icon="cardstack-logo" action=this.transitionHome width="33px" height="35px"}}
  />
  <div class="card-space-category-nav">
    <h1 class="card-space-category-nav__title">Card Space</h1>
  </div>
  <section class="card-space-gallery">
    <div class="card-space-create-panel">
      <Boxel::Button
        {{on "click" (fn this.transitionToWorkflow "create-space")}}
        @kind="primary"
        data-test-workflow-button="create-space"
      >
        Create Space
      </Boxel::Button>

      {{outlet}}
    </div>
  </section>

  <Boxel::Modal
    @size="large"
    @isOpen={{eq this.flow "create-space"}}
    @onClose={{this.resetQueryParams}}
  >
    {{#if (is-network-initialized)}}
      <CardSpace::CreateSpaceWorkflow @onClose={{this.resetQueryParams}} />
    {{/if}}
  </Boxel::Modal>
</main>