<ui-capstone>

<template
  is="ui-capstone"
  flow="string"
  signature="object"
  info="string"
  links="array"
  pillars="array"
  legal="string"
>
  <div class="ui-capstone">
    <div class="ui-capstone-content ui-capstone-flow-{{props.flow ?? 'row'}}">
      <div class="ui-capstone-about">
        <div if="props.signature" class="ui-capstone-signature">
          <img src="{{props.signature?.asset?.url |> esc}}" alt="" />
        </div>
        <div if="props.info" class="ui-capstone-info">{{props.info}}</div>
      </div>

      <div class="ui-capstone-row" if="!props.flow || props.flow === 'row'">
        <nav>
          <ul
            class="ui-capstone-row-items"
            if="Array.isArray(props.links) && props.links.length"
          >
            <li class="ui-capstone-row-item" map="link of props.links">
              <a
                class="ui-capstone-row-link"
                href="{{link.href |> esc}}"
                if="link.href"
              >
                <span if="link.label">{{link.label |> esc}}</span>
              </a>
            </li>
          </ul>
        </nav>
      </div>

      <div class="ui-capstone-pillars" if="props.flow === 'pillars'">
        <div
          class="ui-capstone-pillar"
          map="pillar of props.pillars"
          if="props.flow === 'pillars' && Array.isArray(props.pillars) && props.pillars.length"
        >
          <nav>
            <div if="pillar.caption" class="ui-capstone-caption">
              {{pillar.caption |> esc}}
            </div>
            <ul
              if="Array.isArray(pillar.links) && pillar.links.length"
              class="ui-capstone-pillar-items"
            >
              <li map="link of pillar.links" class="ui-capstone-pillar-item">
                <a
                  class="ui-capstone-pillar-link"
                  href="{{link.href |> esc}}"
                  if="link.href"
                >
                  <span if="link.label">{{link.label |> esc}}</span>
                </a>
              </li>
            </ul>
          </nav>
        </div>
      </div>
    </div>

    <div class="ui-capstone-apex">
      <div if="props.legal" class="ui-capstone-legal">
        {{props.legal |> esc}}
      </div>
    </div>
  </div>
</template>