{# widget template - info for early uploaded image - thumbnail, url, size, etc. #}

{% load thumbnail %}

<table style="border-collapse: collapse; border: none; margin-right: 20px">
    <tr>
        {# thumb #}
        <td style="padding: 0; padding-right: 10px; border: none; vertical-align: middle">
            <div style="width: 80px; height:80px;">
                <img src="{% thumbnail file_path 80x80 %}" style="vertical-align: top;" align="right"/>
            </div>
        </td>
        {# image info #}
        <td style="padding: 0; border: none; vertical-align: middle">
            <div style="margin-bottom: 5px">
                <input value="{{ file_url }}" size="50" type="text" class="js-picrelated-tocopy" />
            </div>
            <div style="margin-bottom: 5px">
                <b>{{ img_x_size }}</b>&times;<b>{{ img_y_size }}</b> px,
                <span style="color: #aaa">{{ file_size|filesizeformat }}</span>
            </div>
        </td>
    </tr>
</table>