{% autoescape None %}

<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center px-3 pt-3">
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="#desc/{{ desc.desc_name }}" onClick="loadPage(this)">{{ desc.desc_name }}</a></li>
            <li class="breadcrumb-item active" aria-current="page">{{ expr.expr_name }}</li>
        </ol>
    </nav>
</div>

<div class="experiment">
    <dl>
        <dt>Expr Description <a href="javascript:;" onClick="updateText(this)" id="edit-desc-link" data-desc="{{ desc.desc_name }}" data-expr="{{ expr.expr_name }}" data-key="expr_description" data-preid="edit-desc">Edit</a></dt>
        <dd><pre class="pre-url" id="edit-desc">{{ format_viewer_link(expr.expr_description) }}</pre></dd>
        <dt>Expr Notes <a href="javascript:;" onClick="updateText(this)" id="edit-note-link" data-desc="{{ desc.desc_name }}" data-expr="{{ expr.expr_name }}" data-key="expr_notes" data-preid="edit-note">Edit</a></dt>
        <dd><pre class="pre-url" id="edit-note">{{ format_viewer_link(expr.expr_notes) }}</pre></dd>
        <dt>Create Time</dt>
        <dd>{{ expr.create_time }}</dd>
        <dt>Update Time</dt>
        <dd>{{ expr.update_time }}</dd>
        <dt>Metrics</dt>
        <dd>{{ format_kv(expr.metrics) }}</dd>
    </dl>

    <div class="table-responsive">
        <table class="table table-striped table-bordered table-sm">
            <thead>
                <tr>
                    <th>
                        <div class="header clearfix">
                            <h5 class="float-start">Runs</h5>
                            <div class="float-end">
                                <a href="javascript:;" onClick="runTensorboard(this)">Tensorboard</a> /
                                <a href="javascript:;" onClick="deleteRuns(this)">Delete</a>
                            </div>
                        </div>
                    </th>
                </tr>
            </thead>
            <tbody>
                {% for run in expr.runs %}
                {% if run.is_master and not is_deleted(run) %}
                <tr>
                    <td class="run-row" data-desc="{{ desc.desc_name }}" data-expr="{{ expr.expr_name }}" data-run="{{ run.run_name }}" data-highlight="{{ format_kv_inline_tb(run.highlight_args) }}">
                        <div class="d-flex">
                            <div class="me-2">
                                <input type="checkbox" />
                                {% if is_stared(run) %} <br /><i class="fa fa-star" style="color: #ffcc66;"></i> {% end %}
                            </div>
                            <div>
                                <div>
                                    <b>Run:</b>
                                    <a href="#desc/{{ desc.desc_name }}/expr/{{ expr.expr_name }}/run/{{ run.run_name }}" onClick="loadPage(this)" class="run-link">{{ run.run_name }}</a>
                                    (<b>Created:</b> {{ run.create_time }}; <b>Updated</b>: {{ run.update_time }})
                                    {% if is_stared(run) %} <a href="javascript:;" onClick="unstarRun(this)">[Unstar]</a> {% else %} <a href="javascript:;" onClick="starRun(this)">[Star]</a> {% end %}
                                </div>
                                <div><b>Metrics:</b> {{ format_kv_inline(run.metrics) }}</div>
                                <div><b>Command:</b> <code>{{ run.command }}</code></div>
                                <div><b>Highlight args:</b> {{ format_kv_inline(run.highlight_args) }}</div>
                                <div><b>Highlight configs:</b> {{ format_kv_inline(run.highlight_configs) }}</div>
                                {% for k, v in format_extra_summary_items(run).items() %}
                                <div><b>{{ k }}:</b> {{ v }}</div>
                                {% end %}
                                {% if run.refer is not None %}
                                <div><b>Parent:</b> <span><a href="#desc/{{ desc.desc_name }}/expr/{{ expr.expr_name }}/run/{{ run.refer.run_name }}" onClick="loadPage(this)" class="run-link" >{{ run.refer.run_name }}</a></span></div>
                                {% end %}
                                <div><b>Description:</b> <span class="inline-pre pre-url">{{ format_viewer_link(run.run_description) }}</span></div>
                            </div>
                        </div>
                    </td>
                </tr>
                {% end %}
                {% end %}
            </tbody>
        </table>
    </div>
    {% if len(tensorboards) > 0 %}
    <div class="table-responsive">
        <table class="table table-striped table-bordered table-sm">
            <thead>
                <tr><th><h5>TensorBoards</h5></th></tr>
            </thead>
            <tbody>
                {% for run in tensorboards %}
                <tr><td>
                    <div class="header clearfix">
                    <div class="float-start">
                        <b>Link:</b> {{ format_tb_link(run['port']) }}
                    </div>
                    <div class="float-end"><a href="javascript:;" onClick="termTensorboard(this);" data-index="{{ run['index'] }}">Terminate</a></div>
                    </div>
                    <div><b>Log Dirs:</b> {{ format_kv(run['logdirs']) }}</div>
                </td></tr>
                {% end %}
            </tbody>
        </table>
    </div>
    {% end %}
</div>
