{{#if segment}}
  <div class="segment-container">
    <div class="layout-row title">
      <div>
        <h1>Segment</h1>
        <h2>{{segment.meta.linkHash}}</h2>
      </div>
      <span class="flex"></span>
      {{#paper-button onClick=(action "close")}} {{paper-icon "close"}} {{/paper-button}}
    </div>
    <div class="body layout-row">
      <div class="menu">
        <ul>
          <li {{action "show" "state"}} class="{{if stateShowed 'active'}}">State</li>
          <li {{action "show" "link"}} class="{{if linkShowed 'active'}}">Link</li>
          <li {{action "show" "evidence"}} class="{{if evidenceShowed 'active'}}">Evidences</li>
          <li {{action "show" "json"}} class="{{if jsonShowed 'active'}}">JSON</li>
        </ul>
      </div>
      <div class="content" class="flex">
        {{#if stateShowed}}
          <pre>{{ json segment.link.state }}</pre> {{/if}}
        {{#if linkShowed}}
          <div class="link">
            <h4>Map ID</h4>
            <p>{{segment.link.meta.mapId}}</p>

            <h4>Process</h4>
            <p>{{segment.link.meta.process}}</p>

            <h4>Previous Link hash</h4>
            <p>{{segment.link.meta.prevLinkHash}}</p>

            <h4>Action</h4>
            <p>{{segment.link.meta.action}} ({{join segment.link.meta.inputs delimiter=", "}})</p>

            <h4>Type</h4>
            <p>{{segment.link.meta.type}}</p>

            <h4>Signed by</h4>
            <p class="pem">
              {{ join segment.link.signatures attribute="publicKey" delimiter="\n"}}
            </p>

            <h4>Metadata</h4>
            <pre>{{ json segment.link.meta.data }}</pre>
          </div>
        {{/if}}
        {{#if evidenceShowed}} {{evidences-component evidencesObj=segment.meta.evidences}} {{/if}}
        {{#if jsonShowed}}
          <pre>{{json segment}}</pre> {{/if}}
      </div>
    </div>
  </div>
{{/if}}