{% extends "base.html" %}

{% load humanize %}
{% load pagination_tags %}

{% block page-title %}Snipt Jobs{% endblock %}

{% block body-class %}{{ block.super }} static jobs search{% endblock %}

{% block js %}
    window.jobs = [
        {% for job in jobs %}
            {{ job.data|safe }}{% if not forloop.last %},{% endif %}
        {% endfor %}
    ];
{% endblock %}

{% block breadcrumb %}
    <li><a href="/jobs/">Snipt Jobs</a></li>
{% endblock %}

{% block content %}
    <div ng-controller="JobSearchController" ng-cloak class="ng-cloak">
        <div class="static-box {% if page.object_list|length > 0 %}has-snipts{% endif %}">
            <form method="get" class="form-search" action=".">
                <input ng-model="query" type="text" class="search-query" name="q" placeholder="Filter jobs" />
            </form>
        </div>
        <div class="loading-jobs" ng-show="!jobs">
            Loading jobs&hellip;
        </div>
        <div class="pagination ng-cloak" ng-cloak ng-show="jobs">
            <button class="btn prev" style="margin: 0 10px;" href ng-disabled="currentPage == 0" ng-click="currentPage=currentPage - 1">Previous</button>
            <span class="page">{[{ currentPage + 1 }]} / {[{ numberOfPages() }]}</span>
            <button class="btn next" style="margin: 0 10px;" ng-disabled="currentPage >= filteredJobs.length / pageSize - 1" ng-click="currentPage=currentPage + 1">Next</button>
        </div>
        <section class="jobs">
            <ul>
                <li ng-repeat="job in filteredJobs|startFrom:currentPage * pageSize|limitTo:pageSize">
                    <a href="{[{ job.url }]}?aff=dbe7e" class="group job-link">
                        <img ng-show="job.company.logo" ng-src="{[{ job.company.logo }]}" />
                        <span class="left">
                            <span class="job">{[{ job.title }]}</span>
                            <span class="company">{[{ job.company.name }]}</span>
                        </span>
                        <span class="right">
                            <span class="location">{[{ job.company.location.city }]}</span>
                            <span class="date">{[{ job.created }]}</span>
                        </span>
                    </a>
                </li>
            </ul>
        </section>
        <div class="pagination ng-cloak" ng-cloak ng-show="jobs">
            <button class="btn prev" style="margin: 0 10px;" href ng-disabled="currentPage == 0" ng-click="currentPage=currentPage - 1">Previous</button>
            <span class="page">{[{ currentPage + 1 }]} / {[{ numberOfPages() }]}</span>
            <button class="btn next" style="margin: 0 10px;" ng-disabled="currentPage >= filteredJobs.length / pageSize - 1" ng-click="currentPage=currentPage + 1">Next</button>
        </div>
    </div>
{% endblock %}

{% block ad %}{% endblock %}
{% block aside-top %}
    <div class="post-job">
        <a id="post-job" href="http://www.authenticjobs.com/post/?aff=dbe7e" class="btn btn-large btn-success">Post a job</a>
        <p>
            We use <a class="job-link" href="http://www.authenticjobs.com?aff=dbe7e">Authentic Jobs</a> for our job board provider. Once you post your ad, it will appear on Snipt within 30 minutes.
        </p>
    </div>
{% endblock %}