{# Template : Downloads #}

{% extends 'chop/layouts.twig' %}

{% block content %}

<div class="pageWrap">

    {% include 'navigation/breadcrumbs.twig' %}

    {% include 'includes/elements/title_wrap.twig' %}

    <div class="contentPageWrap">

        <div class="contentSidebar js_contentSidebar">
            <h3>Categories of downloads</h3>
            <nav>
                <ul>
                    <li><a href="#">Category name</a></li>
                    <li><a href="#">Category name</a></li>
                    <li><a href="#">Category name</a></li>
                    <li><a href="#">Category name</a></li>
                </ul>
            </nav>
        </div> <!-- .contentSidebar -->

        <div class="contentWrap">

            <ul class="downloadList">

                {% for i in 1..10 %}
                    <li class="downloadItem">
                        <span class="fileIcon">
                            <span class="fileType">.doc</span>
                        </span>

                        <div class="downloadContent">
                            <h2 class="downloadTitle">Download name goes here</h2>

                            <ul class="downloadDetails">
                                <li><strong>Type:</strong> Word document</li>
                                <li><strong>Size:</strong> 1.5MB</li>
                            </ul>
                        </div>

                        <a href="#" class="button">Download</a>
                    </li>
                {% endfor %}

            </ul>

            <div class="downloadsPagination">
                <div class="paginumberorder">
                    <ul class="pagination">
                        <li class="first-item"><span class="paginationnumbers">Page 1 of 10</span></li>
                        <li class="active"><a>1</a></li>
                        <li><a href="#">2</a></li>
                        <li><a href="#">3</a></li>
                        <li><a href="#">4</a></li>
                        <li><a href="#">5</a></li>
                        <li><a href="#">6</a></li>
                        <li class="next"><a href="#" rel="next">Next</a></li>
                        <li class="last"><a href="#">Last Page</a></li>
                    </ul>
                </div> <!-- .paginumberorder -->
            </div> <!-- .downloadsPagination -->
        </div> <!-- .contentWrap -->

    </div> <!-- .contentPageWrap -->

</div> <!-- .pageWrap -->

{% endblock %}
