{% extends "dash/_frame.twig" %}

{% block title %}
    {{ title }}
{% endblock %}

{% block stylesheets %}
    <link rel="stylesheet" type="text/css" href="/assets/css/dash.css?=adfdfa">
    {% endblock %}

    {% block mainContent %}
        <div id="post-index">
            <div id="post-index-wrapper">
                <div id="post-index-header">
                    <div id="post-index-header-left">
                        {{ filter  }} Pages
                    </div>
                    <div id="post-index-header-right">
                        <a href="/dashboard/pages/all" title="view all pages">
                            <button>
                                <svg >
                                    <use xlink:href="/assets/images/global/sprite.svg#entypo-archive"/>		
                                </svg>	
                                {{ stats['all'] }}
                            </button>   
                        </a>
                        <a href="/dashboard/pages/published" title="view publised pages">
                            <button>
                                <svg >
                                    <use xlink:href="/assets/images/global/sprite.svg#entypo-globe"/>		
                                </svg>	
                                {{ stats['published'] }}
                            </button>  
                        </a>
                        <a href="/dashboard/pages/deleted" title="view deleted pages">
                            <button>
                                <svg >
                                    <use xlink:href="/assets/images/global/sprite.svg#entypo-circle-with-cross"/>		
                                </svg>	
                                {{ stats['deleted'] }}
                            </button>  
                        </a>
                    </div>
                    
                </div>
                <div id="posts-list">
                    {% for page in pages %}
                        <a class="page-link" href="/dashboard/page/edit/{{ page.uuid }}">
                            <div class="page-bg" style="background: url({{ page.feature }}) no-repeat center center / cover">
                                <label>
                                    {{ page.title }}
                                </label>
                               <div id="meta">
                                    
                                    <div id="options">
                                        {% if page.menu == 'true' %}
                                        {% set menu = "true" %}
                                        {% else %}
                                            {% set menu = "false" %}
                                        {% endif %}
                                        {% if page.published == 'true' %}
                                            {% set published = "true" %}
                                        {% else %}
                                            {% set published = "false" %}
                                        {% endif %}
                                        {% if page.featured == 'true' %}
                                            {% set featured = "true" %}
                                        {% else %}
                                            {% set featured = "false" %}
                                        {% endif %}
                                        <div id="option-left">
                                            
                                            <button data-active="{{ menu }}">
                                                <svg>
                                                    <use xlink:href="/assets/images/global/sprite.svg#entypo-add-to-list"/>		
                                                </svg>		
                                            </button> 
                                            <button data-active="{{ published }}">
                                                <svg>
                                                    <use xlink:href="/assets/images/global/sprite.svg#entypo-globe"/>		
                                                </svg>		
                                            </button> 
                                            
                                            <button data-active="{{ featured }}">
                                                <svg>
                                                    <use xlink:href="/assets/images/global/sprite.svg#entypo-star"/>		
                                                </svg>		
                                            </button>
                                        </div>
                                        <div id="option-right">
                                            <span>
                                                {{ page.updated }}
                                            </span>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </a>
                    {% endfor %}
                    {% if numOfPages > 1 %}
                        <div class="paginate">
                            <a class="page-btns" href="/dashboard/pages/{{ paginate['sort'] }}/{{ paginate['prevPage'] }}">
                                <svg viewbox="0 0 20 20" class="icons"><use xlink:href="/assets/images/global/sprite.svg#entypo-chevron-left"/></svg>
                            </a>
                            <span class="count">
                                {{ currentPage }}
                                of
                                {{ numOfPages }}
                            </span>
                            <a class="page-btns" href="/dashboard/pages/{{ paginate['sort'] }}/{{ paginate['nextPage'] }}">
                                <svg viewbox="0 0 20 20" class="icons"><use xlink:href="/assets/images/global/sprite.svg#entypo-chevron-right"/></svg>
                            </a>
                        </div>
                    {% endif %}

                </div>
            </div>
        </div>
    {% endblock %}

    {% block javascripts %}
        <script src="/assets/scripts/Start.js" type="text/javascript"></script>
    {% endblock %}