{% if d3pagenavi %}
    <style>
        .d3pagenavigation {
            width: 100%; border-style: none;
        }
        .d3pagenavigation td {
            width: 33%; height: 22px;
        }
        .d3pagenavigation .prevPage, .d3pagenavigation .nextPage {
            padding-left:0.5em; padding-right:0.2em;
        }
        .d3pagenavigation .disabled {
            color: #787878;
        }
    </style>
    <table style="padding: 0; border-spacing: 0; border-collapse: collapse" class="d3pagenavigation">
        <tr>
            <td id="nav.site" class="pagenavigation" style="text-align: left">
                {% if d3pagenavi.d3GetPageNaviConfig('blShowPageDropDown') %}
                    <form name="pageForm" id="pageForm" action="{{ oViewConf.getSelfLink()|raw }}" method="post">
                        {{ oViewConf.getHiddenSid()|raw }}
                        {% for name, value in d3pagenavi.getAddParams() %}
                            <input type="hidden" name="{{ name }}" value="{{ value }}">
                        {% endfor %}
                        <label for="page">{{ translate({ ident: "NAVIGATION_PAGE" }) }}</label>
                        <select id="page" name="page" onchange="this.parentNode.submit();">
                            {% for site in $d3pagenavi->getFirstPage()..$d3pagenavi->getLastPage()+1 %}
                                <option value="{{ loop.index0 }}</option>
                            {% endfor %}
                        </select> / {{ d3pagenavi.getLastPage() }}
                    </form>
                {% endif %}
        	</td>
            {% if d3pagenavi.d3GetPageNaviConfig('blShowPageList') %}
                <td class="pagenavigation" style="text-align: center">
                    {% if d3pagenavi.hasLeft() %}
                        <a id="nav.page.{{ d3pagenavi.getFirstPage() }}" class="pagenavigation" href="{{ d3pagenavi.getFirstPageLink() }}">{{ d3pagenavi.getFirstPage() }}</a>
                        {% if d3pagenavi.getCurrentPage() > d3pagenavi.getViewRange() - d3pagenavi.getFirstPage() %}
                            ...
                        {% endif %}
                    {% endif %}
                    {% for iPage, page in d3pagenavi.getRangePageLinks() %}
                        <a id="nav.page.{{ iPage }}" class="pagenavigation{% if iPage == d3pagenavi.getCurrentPage() %} pagenavigationactive{% endif %}" href="{{ page }}">{{ iPage }}</a>
                    {% endfor %}
                    {% if d3pagenavi.hasRight() %}
                        {% if d3pagenavi.getLastPage() - 1 > iPage %}
                            ...
                        {% endif %}
                        <a id="nav.page.{{ d3pagenavi.getLastPage() }}" class="pagenavigation" href="{{ d3pagenavi.getLastPageLink() }}">{{ d3pagenavi.getLastPage() }}</a>
                    {% endif %}
                </td>
            {% endif %}
            <td class="pagenavigation" style="text-align: right">
                {% if d3pagenavi.d3GetPageNaviConfig('blShowDirectionLinks') %}
                    {% if d3pagenavi.getPrevPageLink() %}
                        <a id="nav.first" class="prevPage" href="{{ d3pagenavi.getFirstPageLink() }}">{{ d3pagenavi.getFirstPageTitle() }}</a>
                        <a id="nav.prev" class="prevPage" href="{{ d3pagenavi.getPrevPageLink() }}">{{ d3pagenavi.getPrevPageTitle() }}</a>
                    {% else %}
                        <span class="prevPage disabled">{{ d3pagenavi.getFirstPageTitle() }}</span>
                        <span class="prevPage disabled">{{ d3pagenavi.getPrevPageTitle() }}</span>
                    {% endif %}
                    {% if d3pagenavi.getNextPageLink() %}
                        <a id="nav.next" class="nextPage" href="{{ d3pagenavi.getNextPageLink() }}">{{ d3pagenavi.getNextPageTitle() }}</a>
                        <a id="nav.last" class="nextPage" href="{{ d3pagenavi.getLastPageLink() }}">{{ d3pagenavi.getLastPageTitle() }}</a>
                    {% else %}
                        <span class="nextPage disabled">{{ d3pagenavi.getNextPageTitle() }}</span>
                        <span class="nextPage disabled">{{ d3pagenavi.getLastPageTitle() }}</span>
                    {% endif %}
                {% endif %}
            </td>
        </tr>
    </table>
{% endif %}