{% extends "base.html" %}
{% block js %}
    <link href="{{STATIC_URL}}/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="{{STATIC_URL}}/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="{{STATIC_URL}}/js/dataTables.fileSize.js"></script>
    <script type="text/javascript" src="{{STATIC_URL}}/js/dataTables.dateEuro.js"></script>
    <script>
        $(document).ready(function() {
            $('#content').dataTable({
                "aoColumns": [
                { "sType": "date-euro" },
                null,
                null,
                { "sType": "file-size" },
                { "sType": "date-euro" },
                null,
                { "sType": "date-euro" }
            ]
            });
        });
    </script>
{% endblock %}
{% block content %}
<h1>Content for {{username}}</h1>
<div>
    <strong>Number of files:</strong> {{ content|length }} | <strong>Total storage:</strong> {{ total_bytecount.bytecount__sum|filesizeformat }}
</div>
 <br>
 <br>
<div>
    <table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered" id="content">
        <thead>
            <tr>
                <th>Created</th><th>Name</th><th>Type</th><th>Filesize</th><th>Modified</th><th>Views</th><th>Last viewed</th>
            </tr>
        </thead>
        <tbody>
        {% for item in content %}
            <tr>
                <td>{{ item.created|date:"d/m/Y H:i:s" }}</td>
                <td><a href="{{ item.go_url }}">{{ item.name }}</a> <a href="{{ item.download_url }}"><i class="icon-download"></i></a></td>
                <td>{{ item.type }}</td>

                <td>{{ item.bytecount|filesizeformat }}</td>
                <td>{{ item.modified|date:"d/m/Y H:i:s" }}</td>
                <td>{{ item.views }}</td>
                <td>{{ item.lastviewed|date:"d/m/Y H:i:s" }}</td>
            </tr>
        {% endfor %}
        </tbody>
    </table>
</div>
{% endblock %}

{% block widgets %}

{% endblock %}