<h2 class="section-title" id="examples">Examples</h2>
<div class="section-block">
    {% for example in examples %}
    {% set i = loop.index %}
    <h4 class="js-toc-ignore">Example {{ i }}</h4>
    {% set title = example.get("title", "Example {{ i }}") %}
    {% set link_id = "example_{}".format(i) %}
    {{ title | from_markdown }}
    {% set example_vars = example.get("vars", {}) %}
    {% if example_vars %}
    {% set temp = [{frecklet_name: example_vars}] %}
    {% else %}
    {% set temp = [frecklet_name] %}
    {% endif %}
    <h5 class="js-toc-ignore block-title">Code</h5>
    {{ temp | to_yaml | to_code_block(format="yaml")
    | from_markdown }}
    {% set desc = example.get("desc", None) %}
    {% if desc %}
    <h5 class="js-toc-ignore block-title">Description</h5>
    {{ desc | from_markdown }}
    {% endif %}
    {#
    <h5 class="js-toc-ignore block-title">Processed tasklist</h5>

    <ul class="nav nav-tabs" id="example_{{ i }}_tab" role="tablist">
        <li class="nav-item">
            <a class="nav-link active" id="example_{{ i }}_verbal_tab" data-toggle="tab"
               href="#example_{{ i }}_verbal"
               role="tab" aria-controls="example_{{ i }}_verbal" aria-selected="true">Execution plan</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" id="example_{{ i }}_code_tab" data-toggle="tab" href="#example_{{ i }}_code"
               role="tab"
               aria-controls="example_{{ i }}_code" aria-selected="true">Tasklist (exploded)</a>
        </li>

    </ul>

    <!-- Tab panes -->
    <div class="tab-content">
        <div class="tab-pane active" id="example_{{ i }}_verbal" role="tabpanel"
             aria-labelledby="example_{{ i }}_verbal_tab">
            <pre><code>{{ frecklet_name | frecklet_task_plan_for_vars(vars=example.get("vars", {})) }}
            </code></pre>
        </div>
        <div class="tab-pane" id="example_{{ i }}_code" role="tabpanel"
             aria-labelledby="example_{{ i }}_code_tab">
            <pre><code>{{ frecklet_name | frecklet_task_list_for_vars(vars=example.get("vars", {})) }}
            </code></pre>
        </div>
    </div>
    #}
    {% endfor %}
</div>