humans.html

<script src="https://cdn.front.nu/dist/front.js" template="index"></script>
<title globalize="persons">Persons</title>
<template>
  <aside index="0"></aside>
  <aside index="1">
    <nav class="sidebar bcwhite w15r xxxl_w20r">
      <h5 class="p1 mt1" globalize="search">Search</h5>
      <hr>
      <div class="p1">
        <small class="pb1 ttu" globalize="name">Name</small>
        <input type="text" onkeyup="filter()">
      </div>
      <div class="p1">
        <small class="pb1 ttu" globalize="country_of_birth">Country of birth</small>
        <select>
          <option>All</option>
        </select>
      </div>
      <div class="p1">
        <small class="pb1 ttu" globalize="country_of_residence">Country of residence</small>
        <select>
          <option>All</option>
        </select>
      </div>
      <div class="p1">
        <small class="pb1 ttu" globalize="country_of_residence">Ethnicity</small>
        <select>
          <option>All</option>
        </select>
      </div>
    </nav>
  </aside>
</template>

<section class="pauto" storage="api">
  <nav class="crumbs pointer bocblack01 bw1 bcwhite br05 gray w0">
    <ol>
      <li><a href="#" globalize="identity">Identity</a></li>
      <li globalize="persons">Persons</li>
    </ol>
  </nav>
  <button class="br50 bcblack white w1r h1r fr"><i class="icon24">&#43;</i></button>
  <h3 class="mt1 mb1" globalize="persons">Persons</h3>

  <nav class="tabs mt05" id="test">
    <input type="radio" name="panel" id="tabalive" checked>
    <label for="tabalive" id="alive">Alive ({# alive #})</label>
    <section class="p0 shade1" json="personsalive" bind="alive:alive" bindvalue="{{ jsonheader:content-range = split('/',1) }}">
      <div id="personsalive" class="box cards list br0-" iterate="true" datasource="{{ storage:api.persons.endpoint }}?and=(death.is.null)" dataheader="{{ storage:api.persons.headers }}">
        <a href="#edit" modalurl="human-edit.html?id={{ jsonget:id }}">
          <figure class="p075 bcwhite bcblack001_h">
            <p class="f2 pl1" filteron="true">{{ jsonget:first_name.swe }} {{ jsonget:middle_name.swe }} {{ jsonget:last_name.swe }}</p>
              <img src="" jsonget="birth.country_code" jsonbefore="https://cdn.front.nu/dist/design/front/flags/famfamfam/" jsonafter=".gif" class="f0">
          </figure>
        </a>
      </div>
    </section>

    <input type="radio" name="panel" id="tabdead">
    <label for="tabdead" id="dead" hide>Dead ({# dead #})</label>
    <section class="lg_p0 shade1" run="false" json="personsdead" bind="dead:dead" bindvalue="{{ jsonheader:content-range = split('/',1) }}">
      <div id="personsdead" class="box cards list br0-" iterate="true" datasource="{{ storage:api.persons.endpoint }}?and=(death.not.is.null)" dataheader="{{ storage:api.persons.headers }}">
        <a href="#edit">
          <figure class="p1 bcwhite bcblack001_h">
            <img src="" jsonget="birth.country_code" jsonbefore="https://cdn.front.nu/dist/design/front/flags/famfamfam/" jsonafter=".gif" class="f0">
            <p class="f2 pl1" filteron="true">{{ jsonget:first_name.swe }} {{ jsonget:middle_name.swe }} {{ jsonget:last_name.swe }}</p>
            <p class="tar" jsonget="death.date"></p>
          </figure>
        </a>
      </div>
    </section>
  </nav>

</section>