{function name="button"}
<a class="action" title="{$action}" href="javascript: void(0);"><img src="i/{$icon}">{$capt}</a>
{/function}


<h3 class="title">{$i.FILENAME|escape:html}</h3>
<div class="techinfo">
    <span>{$i.AUDIO_CODEC}</span>
    <span>{$i.AUDIO_SAMPLES}</span>
    <span>{$i.AUDIO_BITRATE}</span>
</div>
<table>
{foreach from=$metas item=caption key=k}
{if $i.$k}
<tr>
    <th>{$caption|escape:'html'}</th>
    <td>{$i.$k|escape:'html'}</td>
</tr>
{/if}
{/foreach}
</table>
{if $i.LENGTH != "0s"}
<div class="progress" title="Click to seek">
    <span>{$i.TIME_POSITION} / {$i.LENGTH} {if $i.pause != "no"}(paused){/if}</span>
    <div style="width: {$i.PERCENTAGE}%">
        &nbsp;
    </div>
</div>

<div class="menu">
    {button action="prev" icon="control_rewind.png" capt="Previous track"}
    {button action="next" icon="control_fastforward.png" capt="Next track"}
    {button action="eject" icon="control_eject.png" capt="Eject"}
    {if $i.pause == "no"}
    {button action="pause" icon="control_pause.png" capt="Pause"}
    {else}
    {button action="pause" icon="control_play.png" capt="Resume"}
    {/if}
</div>
{/if}

<div class="clear">&nbsp;</div>
<h3 class="volume">Volume: {$i.volume|round:1}%</h3>
<div class="volume" title="Volume control">
    &nbsp;
    <div style="width: {$i.volume}%">
        &nbsp;
    </div>
</div>