<h2 class="section-title" id="execution_plan">Tasklist</h2>

<div class="section-block">
    <ul class="nav nav-tabs" id="tasklist_tab" role="tablist">
        <li class="nav-item">
            <a class="nav-link active" id="tasklist_verbal_tab" data-toggle="tab" href="#tasklist_verbal"
               role="tab" aria-controls="tasklist_verbal" aria-selected="true">Execution plan</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" id="tasklist_code_tab" data-toggle="tab" href="#tasklist_code" role="tab"
               aria-controls="tasklist_code" aria-selected="true">Resolved tasklist</a>
        </li>

    </ul>

    <!-- Tab panes -->
    <div class="tab-content">
        <div class="tab-pane active" id="tasklist_verbal" role="tabpanel"
             aria-labelledby="tasklist_verbal_tab">
            <pre><code>{{== frecklet_name | frecklet_task_plan ==}}
            </code></pre>
        </div>
        <div class="tab-pane" id="tasklist_code" role="tabpanel" aria-labelledby="tasklist_code_tab">
            <pre><code>{{== frecklet_name | frecklet_task_list | to_yaml ==}}</code></pre>
        </div>
    </div>
</div>