<div class="cd-project-step"
     id="{{ "project-step" | id }}"
     data-step-name="{{ id }}"
>
  <a class="step-anchor" name="{{ id }}"></a>
  <div class="header standard">

    <div id="{{ "title-box" | id }}"
         class="title-box {{ 'clicker opened' if body else '' }}"
         data-closes="#{{ "body" | id }}|#{{ "code" | id }}"
         data-opens="#{{ "body" | id }}"
         data-marks-closed="#{{ "code-toggler" | id }}"
         onclick="CAULDRON.collapse('{{ "title-box" | id }}')"
    >
      {% if has_body %}
      <i class="material-icons closed-icon">keyboard_arrow_down</i>
      <i class="material-icons opened-icon">keyboard_arrow_up</i>
      {% endif %}
      <div>
        <div class="title cd-step-title">{{ title if title else id }}</div>
        {% if subtitle %}
        <div class="subtitle">{{ subtitle }}</div>
        {% endif %}
      </div>
    </div>

    <div class="spacer"> </div>

    <div class="button-bar">
      {% if codes %}
      <div id="{{ "code-toggler" | id }}"
           class="clicker closed centered"
           data-closes="#{{ "code" | id }}"
           data-opens="#{{ "code" | id }}"
           onclick="CAULDRON.collapse('{{ "code-toggler" | id }}')">
        code
        <i class="material-icons closed-icon">keyboard_arrow_down</i>
        <i class="material-icons opened-icon">keyboard_arrow_up</i>
      </div>
      {%  endif %}
    </div>
  </div>

  {% if codes %}
  <div class="code-box"
       id="{{ "code" | id }}"
       style="display:none">
    <div class="code-toolbar">
      <div class="spacer"></div>
      <div class="tool-button"
           onclick="CAULDRON.changeFontSize('#{{ "code" | id }} .code-wrapper', -1)"
      >
        -
      </div>
      <div class="tool-button"
           onclick="CAULDRON.changeFontSize('#{{ "code" | id }} .code-wrapper', 0)"
      >
        100%
      </div>
      <div class="tool-button"
           onclick="CAULDRON.changeFontSize('#{{ "code" | id }} .code-wrapper', 1)"
      >
        +
      </div>
    </div>
    <div class="code-wrapper"
         data-font-size="0.6"
         data-font-size-default="0.6"
         style="font-size: 0.6em"
    >
      {% for entry in codes %}
      <div class="code-file-header">{{ entry.filename }}</div>
      <div class="code-file-box">
        {{ entry.code }}
      </div>
      {% endfor %}
    </div>

  </div>
  {% endif %}

  {% if body %}
  <div id="{{ "body" | id }}"
       class="cd-project-step-body"
       {% if not has_body %}
         style="display:none;"
       {% endif %}
  >
    {{ body }}
  </div>
  {%  endif %}

  {% if error %}
    {{ error }}
  {% endif %}
</div>
