{% let name        = get("name")       .content %}
{% let description = get("description").content %}
{% let image       = get("image")      .content %}
{% let procs       = get("procs")      .content %}
{% let cp          = get("cp")         .content %}
{% let range       = get("range")      .content %}
{% let aoe         = get("aoe")        .content %}
{% let duration    = get("duration")   .content %}
{% let power       = get("power")      .content %}
{% let playcost    = get("playcost")   .content %}


{% proc mk_cost_bar(): string = %}
  <div class="bar">
    {% for parts in playcost.split(",").map (x) => x.strip().split(" ") %}
      {% if parts[0].is_numeric() %}
        <section>
          <big>{{ parts[0] }}</big><br>
          <small>{{ parts[1..^1].join(" ") }}</small>
        </section>
      {% elif parts.len() == 1 %}
        <section>
          <big>{{ 1 }}</big><br>
          <small>{{ playcost }}</small>
        </section>
      {% endif %}
    {% endfor %}
  </div>
{% endmacro %}
{% proc mk_effect_bar(): string = %}
  <div class="bar">
    <section>
      <big>{{ power }}</big><br>
      <small>power</small>
    </section>
    {## }
    {% if duration != "" %}
      <section>
        <big>{{ duration }}</big><br>
        <small>Duration</small>
      </section>
    {% endif %}
    {##}
  </div>
{% endmacro %}
{% proc mk_figure(): string = %}
  <div class="layer">
    <img src="{{ image }}">
  </div>
{% endmacro %}
{% proc mk_desc(): string = %}
  <div class="description vbox">
    <div class="grow">{# start top-justified #}

      <center><i>{{ description }}</i></center>

      <div class="hbox">
        <div class="grow">
          {# column one #}
          <table>
          {% for proc_line in procs.splitlines() %}
            {% let p = proc_line.split() %}
            <tr>
              {# number of dies #}<td>{{ p[0] }}
              {# procs          #}<td>{{ p[1] }}
              {# arrow          #}<td>{{ p[2] }}
              {# effect         #}<td>{{ p[3..^1].join("\n") }}
            </tr>
          {% endfor %}
          </table>
        </div>
        <div>
          {# column two #}
        </div>
      </div>

    </div>{# end top-justified #}
    <div>{# start bottom-justified #}

      <center>
        &#x274F; &#x274F; &#x274F; &#x274F; &#x274F;
        &#x274F; &#x274F; &#x274F; &#x274F; &#x274F;
      </center>

    </div>{# end bottom-justified #}
  </div>
{% endmacro %}
{% proc mk_sidebar(): string = %}
  <div>
  {% for _ in 0..<2 %}
    <div class="range-grid">
      {% for x in 1..7 %}{% for y in 1..7 %}
      <div style="grid-row: {{ x }}; grid-column: {{ y }}; background: LightSkyBlue"></div>
      {% endfor %}{% endfor %}
      <div class="label">AoE</div>

      {% for x in 1..7 %}{% for y in 1..7 %}
      {% if (x-4)^2 + (y-4)^2 <= 3^2 %}
      <div style="grid-row: {{ x }}; grid-column: {{ y }}; background: green"></div>
      {% endif %}
      {% endfor %}{% endfor %}

      {% for (x, y) in [
        (3, 3),
        (3, 4),
        (3, 5),
      ] %}
        <div style="grid-row: {{ x }}; grid-column: {{ y }}; background: var(--color-bg-costbar)"></div>
      {% endfor %}
      {#
      <div style="grid-row: 2; grid-column: 5; background: var(--color-bg-costbar)"></div>
      #}
    </div>
  {% endfor %}
  </div>
{% endproc %}

<div class="fjomp_card">
  <header class="hbox">
    <span class="    ">symbol</span>
    <span class="grow">{{ name }}</span>
  </header>
  {{ mk_cost_bar() }}
  <div class="hbox">
    <div class="vbox grow">
      <figure class="grow">
        {{ mk_figure() }}
      </figure>
    </div>
    {{ mk_sidebar() }}
  </div>
  {{ mk_effect_bar() }}
  {{ mk_desc() }}
  <div class="bar vbox">
    {##}
    {% if duration != "" %}
    <div> Duration: {{ duration }} </div>
    {% endif %}
    {##}
    {## }
    <div>
      &#x274F; &#x274F; &#x274F; &#x274F; &#x274F;
      &#x274F; &#x274F; &#x274F; &#x274F; &#x274F;
    </div>
    {##}
    <div class="rjust grow"> {{ cp }} CP </div>
  </div>
</div>


<table>
  <tr><th>range   </th><td>{{ range    }}</td></tr>
  <tr><th>aoe     </th><td>{{ aoe      }}</td></tr>
  <tr><th>duration</th><td>{{ duration }}</td></tr>
  <tr><th>power   </th><td>{{ power    }}</td></tr>
  <tr><th>playcost</th><td>{{ playcost }}</td></tr>
</table>


{## }
<ul>
{% for entry in entries %}
  <li>
    {{ ($entry).replace("\\", "\\\\") }}
{% endfor %}
</ul>
{##}


{## }
<ul>
{% for (idx, component) in components.pairs %}
  <li>
    {{ component.x }}
    {{ component.y }}
    {{ component.key }}
    {{ component.attrs }}
{% endfor %}
</ul>
{##}