<!--image file condition-->
{% if filename.endswith('png') or filename.endswith('jpg') %}
    {% include 'file_img.html' %}

<!--html file condition-->
{% elif filename.endswith('html') %}
    {{ open(path, 'r').read() }}

<!--segment XML file condition-->
{% elif ( filename.endswith('xml') or filename.endswith('xml.gz') ) and content %}

    <!--table header-->
    <table class="table"> 
    <thead>         
    <tr>
        <th>Channel</th>
        <th>GPS Start</th>
        <th>GPS End</th>
        <th>Duration (s)</th>
    </tr>         
    </thead>    
    <tbody>

    <!--table rows-->
    {% for channel, segmentlist in content.items() %}
        {% for seg in segmentlist %}
            <tr>
                <td>{{channel}}</td>
                <td>{{seg[0]}}</td>
                <td>{{seg[1]}}</td>
                <td>{{abs(seg)}}</td>
            </tr>
        {% endfor %}
    {% endfor %}
    </tbody>
    </table>

<!--configuration files-->
{% elif filename.endswith('.ini') %}
    <pre>{{ open(path, 'r').read() }}</pre>

<!--html file fragments-->
{% elif filename.endswith('.htmlf') %}
    <pre>{{content}}</pre>

<!--catch-all condition-->
{% else %}
    <p>Unsupported file extension.</p>

{% endif %}

<!--always link to file-->
<a class="btn btn-xs btn-primary" href='{{filename}}' target="_blank">Link to File</a>

<!--make a caption to the content -->
{% if cp.check_option(filename, 'caption') %}
    <button type="button" class="btn btn-xs btn-primary"
            data-toggle="popover" title="Caption" data-placement="bottom"
            data-content="{{cp.get(filename, 'caption')}}">
            Caption
    </button>
{% endif %}

<!--show cmd line if there is one -->
{% if cp.check_option(filename, 'cmd') %}
    <button type="button" class="btn btn-xs btn-primary"
            data-toggle="popover" title="Command Line" data-placement="right"
            data-content="{{cp.get(filename, 'cmd')}}">
            Command Line
    </button>
{% endif %}
