<style data-style="{{ "css" | id }}">
  #{{ "project-step" | id }}  .cd-step-elapsed {
    display: none;
    position: absolute;
    z-index: 20;
    background-color: #555;
    border: 1px solid #444;
    color: #EEE;
    padding: 0.25em 1em;
    align-items: center;
    right: 0;
  }
  #{{ "project-step" | id }} .cd-step-elapsed__header {
    margin-right: 10px;
  }
  #{{ "project-step" | id }} .cd-step-elapsed__value {
    font-size: 1.5rem;
  }
  #{{ "project-step" | id }} .cd-step-stopwatch {
    margin-right: 10px;
    margin-top: 2px;
    cursor: zoom-in;
  }
  #{{ "project-step" | id }} .cd-step-stopwatch:hover .cd-step-elapsed {
    display: block;
  }
</style>

<div class="cd-project-step"
     id="{{ "project-step" | id }}"
     data-step-name="{{ id }}"
     data-step-updated="{{ last_display_update }}"
     style="display:{{ 'block' if is_visible else 'none' }}"
>
  <a class="step-anchor" name="{{ id }}" data-type=""></a>
  <div class="cd-project-step__header cd-project-step__header--standard"
       data-default-modifier="cd-project-step__header--standard"
  >

    <div
      id="{{ "title-box" | id }}"
      class="title-box {{ 'clicker opened' if body else '' }}"
      data-closes="#{{ "body" | id }}|#{{ "code" | id }}|#{{ "cd-StdErr__body" | id }}"
      data-opens="#{{ "body" | id }}"
      data-marks-closed="#{{ "code-toggler" | id }}|#{{ "cd-StdErr__titleBox" | 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="cd-step-stopwatch">
      <i class="material-icons md-18">timer</i>
      <div class="cd-step-elapsed">
        <div class="cd-step-elapsed__header">Elapsed Time:</div>
        <div class="cd-step-elapsed__value">{{ elapsed_time }}</div>
      </div>
    </div>

    <div class="button-bar">
      {% if code %}
      <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 code %}
  <div class="cd-CodeBlock code-box"
       id="{{ "code" | id }}"
       style="display:none"
  >
    <div class="cd-CodeBlock__toolbar code-toolbar">
      <div class="spacer"></div>
      <div class="cd-CodeBlock__toolButton tool-button"
           onclick="CAULDRON.changeFontSize('#{{ "code" | id }} .code-wrapper', -1)"
      >
        -
      </div>
      <div class="cd-CodeBlock__toolButton tool-button"
           onclick="CAULDRON.changeFontSize('#{{ "code" | id }} .code-wrapper', 0)"
      >
        100%
      </div>
      <div class="cd-CodeBlock__toolButton tool-button"
           onclick="CAULDRON.changeFontSize('#{{ "code" | id }} .code-wrapper', 1)"
      >
        +
      </div>
    </div>
    <div class="cd-CodeBlock__wrapper code-wrapper"
         data-font-size="0.6"
         data-font-size-default="0.6"
         style="font-size: 0.6em"
    >
      <div class="cd-CodeBlock__FileBox code-file-box">
        {{ code.code }}
      </div>
    </div>
  </div>
  {% endif %}

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

      {% if std_err %}
      {% include "StdErr.html" %}
      {% endif %}
      <div class="cd-ProjectStep__bodyInner">{{ body }}</div>
  </div>
  {%  endif %}

  {% if is_running and (progress or progress_message) %}
    {% include "step-status.html" %}
  {% endif %}

  {% if error %}
    <a class="step-anchor" name="{{ id }}--error" data-type="--error"></a>
    {{ error }}
  {% endif %}
  <a class="step-anchor" name="{{ id }}--end" data-type="--end"></a>
</div>
