{{#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>Agent Hash</h4>
        <p>{{segment.link.meta.agentHash}}</p>

        <h4>State Hash</h4>
        <p>{{segment.link.meta.stateHash}}</p>

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

        <h4>Action</h4>
        <p>{{segment.link.meta.action}} ({{join segment.link.meta.arguments delimiter=", "}})</p>
      </div>
      {{/if}} {{#if evidenceShowed}} {{evidences-component evidences=segment.meta.evidences}} {{/if}} {{#if jsonShowed}}
      <pre>{{json segment}}</pre> {{/if}}
    </div>
  </div>
</div>
{{/if}}