<commit_before>{% extends 'AppBundle:Layouts:application.html.twig' %}

{% block htmlTitle %}Deputy reports dashboard{% endblock %}
{% block pageTitle %}Deputy reports dashboard{% endblock %}

{% block pageContent %}

	<div class="tabs push-half--bottom">
		<div class="tabs-nav">
	        <ul class="tabs-list" role="tablist">
				<li class="tab-item clients {{ not filters.status ? 'active' : ''  }}" role="presentation">
					<a href="?status=" role="tab" tabindex="0" aria-selected="true">
						<span class="data-item bold-large">{{ counts.total }}</span>
						<span class="data-item bold-xsmall">Clients</span>
					</a>
				</li>
				<li class="tab-item unstarted {{ filters.status =='notStarted' ? 'active' : '' }}" role="presentation">
					<a href="?status=notStarted" role="tab" tabindex="0">
						<span class="data-item bold-large">{{ counts.notStarted }}</span>
						<span class="data-item bold-xsmall">Not started</span></a>
				</li>
				<li class="tab-item progress {{ filters.status =='notFinished' ? 'active' : '' }}" role="presentation">
					<a href="?status=notFinished" role="tab" tabindex="0">
						<span class="data-item bold-large">{{ counts.notFinished }}</span>
						<span class="data-item bold-xsmall">In progress</span></a>
				</li>
				<li class="tab-item ready {{ filters.status =='readyToSubmit' ? 'active' : '' }}" role="presentation">
					<a href="?status=readyToSubmit" role="tab" tabindex="0">
						<span class="data-item bold-large">{{ counts.readyToSubmit }}</span>
						<span class="data-item bold-xsmall">Ready to submit</span></a>
				</li>
	        </ul>
	     </div>
	</div>

	<table class="push--bottom">
		<thead>
			<tr>
				<th scope="col">Client</th>
				<th scope="col">Court order no.</th>
				<th scope="col">Report due date</th>
				<th scope="col" class="numeric">Report status</th>
			</tr>
		</thead>
		<tbody>
	    {% for report in reports %}
			<tr>
				<td>
					<a href="#">
				        {{ report.client.lastName|title }}, {{ report.client.firstName|title }}
					</a>
				</td>
				<td>
					{{ report.client.caseNumber|upper }}
				</td>
				<td>
					<span>{{ report.dueDate | date("j M Y") }}</span><br>
					{% if report.dueDateDiffDays < 0 %}
						<span class="font-xsmall bold text-red">Overdue by {{ report.dueDateDiffDays|abs }} days</span>
					{% elseif report.dueDateDiffDays == 0 %}
						<span class="font-xsmall bold">Due today</span>
					{% else %}
						<span class="font-xsmall">Due in {{ report.dueDateDiffDays }} days</span>
					{% endif %}
				</td>
				<td class="numeric">
					{% if report.status.status == 'notStarted' %}
				        <span class="status status-large not-started">Not Started</span>
				    {% elseif report.status.status == 'notFinished' %}
				        <span class="status status-large incomplete">In Progress</span>
				    {% elseif report.status.status == 'readyToSubmit' %}
				        <span class="status status-large done">Ready To Submit</span>
				    {% endif %}
				</td>
			</tr>
	    {% endfor %}
		</tbody>
	</table>

	{# http://rural-payments-styleguide.herokuapp.com/pagination/ #}
	<div class="pager">
		<div class="pager-controls">
			<a class="pager-prev" href="#">Prev</a>
			<ul class="pager-items">
				<li>1</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>
			</ul>
			<a class="pager-next" href="#">Next</a>
		</div>
		<div class="pager-summary">Showing 1 &ndash; 50 of 146 clients</div>
	</div>
<commit_msg>DDPB-962 working pagination keeping tabs<commit_after>{% extends 'AppBundle:Layouts:application.html.twig' %}

{% block htmlTitle %}Deputy reports dashboard{% endblock %}
{% block pageTitle %}Deputy reports dashboard{% endblock %}

{% block pageContent %}

	<div class="tabs push-half--bottom">
		<div class="tabs-nav">
	        <ul class="tabs-list" role="tablist">
				<li class="tab-item clients {{ not filters.status ? 'active' : ''  }}" role="presentation">
					<a href="{{ path('pa_dashboard', {'status': ''}) }}" role="tab" tabindex="0" aria-selected="true">
						<span class="data-item bold-large">{{ counts.total }}</span>
						<span class="data-item bold-xsmall">Clients</span>
					</a>
				</li>
				<li class="tab-item unstarted {{ filters.status =='notStarted' ? 'active' : '' }}" role="presentation">
					<a href="{{ path('pa_dashboard', {'status': 'notStarted'}) }}" role="tab" tabindex="0">
						<span class="data-item bold-large">{{ counts.notStarted }}</span>
						<span class="data-item bold-xsmall">Not started</span></a>
				</li>
				<li class="tab-item progress {{ filters.status =='notFinished' ? 'active' : '' }}" role="presentation">
					<a href="{{ path('pa_dashboard', {'status': 'notFinished'}) }}" role="tab" tabindex="0">
						<span class="data-item bold-large">{{ counts.notFinished }}</span>
						<span class="data-item bold-xsmall">In progress</span></a>
				</li>
				<li class="tab-item ready {{ filters.status =='readyToSubmit' ? 'active' : '' }}" role="presentation">
					<a href="{{ path('pa_dashboard', {'status': 'readyToSubmit'}) }}" role="tab" tabindex="0">
						<span class="data-item bold-large">{{ counts.readyToSubmit }}</span>
						<span class="data-item bold-xsmall">Ready to submit</span></a>
				</li>
	        </ul>
	     </div>
	</div>

	<table class="push--bottom">
		<thead>
			<tr>
				<th scope="col">Client</th>
				<th scope="col">Court order no.</th>
				<th scope="col">Report due date</th>
				<th scope="col" class="numeric">Report status</th>
			</tr>
		</thead>
		<tbody>
	    {% for report in reports %}
			<tr>
				<td>
					<a href="#">
				        {{ report.client.lastName|title }}, {{ report.client.firstName|title }}
					</a>
				</td>
				<td>
					{{ report.client.caseNumber|upper }}
				</td>
				<td>
					<span>{{ report.dueDate | date("j M Y") }}</span><br>
					{% if report.dueDateDiffDays < 0 %}
						<span class="font-xsmall bold text-red">Overdue by {{ report.dueDateDiffDays|abs }} days</span>
					{% elseif report.dueDateDiffDays == 0 %}
						<span class="font-xsmall bold">Due today</span>
					{% else %}
						<span class="font-xsmall">Due in {{ report.dueDateDiffDays }} days</span>
					{% endif %}
				</td>
				<td class="numeric">
					{% if report.status.status == 'notStarted' %}
				        <span class="status status-large not-started">Not Started</span>
				    {% elseif report.status.status == 'notFinished' %}
				        <span class="status status-large incomplete">In Progress</span>
				    {% elseif report.status.status == 'readyToSubmit' %}
				        <span class="status status-large done">Ready To Submit</span>
				    {% endif %}
				</td>
			</tr>
	    {% endfor %}
		</tbody>
	</table>

	{# http://rural-payments-styleguide.herokuapp.com/pagination/ #}
	{% set recordsPerPage = filters.limit %}
	{% set totalRecords = counts[filters.status ?: 'total'] %}
    {% set pages = range(0, totalRecords, recordsPerPage) %}

	{% if pages | length > 1 %}
		<div class="pager">
			<div class="pager-controls">
                {% if filters.offset > 0 %}
                    <a class="pager-prev" href="{{ path('pa_dashboard', {
                        'status': filters.status,
                        'offset': filters.offset - recordsPerPage
                    }) }}">Prev</a>
                {% endif %}

				<ul class="pager-items">
					{% for currentOffset in pages %}
                        {% if currentOffset == filters.offset %}
                            <li>{{ loop.index }}</li>
                        {% else %}
                            <li><a href="{{ path('pa_dashboard', {
                                    'status': filters.status,
                                    'offset': currentOffset
                                }) }}">{{ loop.index }}</a></li>
                        {% endif %}
					{% endfor %}
				</ul>

                {% if (filters.offset + recordsPerPage) < totalRecords %}
                    <a class="pager-next" href="{{ path('pa_dashboard', {
                        'status': filters.status,
                        'offset': filters.offset + recordsPerPage
                    }) }}">Next</a>
                {% endif %}

			</div>
            {% set firstRecordDisplayed = filters.offset + 1 %}
            {% set lastRecordDisplayed = (filters.offset + recordsPerPage) > totalRecords ? totalRecords : (filters.offset + recordsPerPage)  %}
            <div class="pager-summary">Showing {{ firstRecordDisplayed }} &ndash; {{ lastRecordDisplayed }} of {{ totalRecords }} clients</div>
		</div>
	{% endif %}

{'fraction_non_alphanumeric': 0.19549308862817982, 'fraction_numerical': 0.0034847252874898363, 'mean_word_length': 2.662271373883454, 'pattern_counts': {'":': 0, '<': 216, '<?xml version=': 0, '>': 216, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 3, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4662535', 'n_tokens_mistral': 3348, 'n_tokens_neox': 2697, 'n_words': 576}