{% if editmode %}
<div class="flex-col offset-bottom-single">
<div class="col xs-12 m-6 l-3">
<span class="hint">{{ 'Loga API Url' |trans }}</span>
{{ pimcore_input("api_url") }}
</div>
<div class="col xs-12 m-6 l-3">
<span class="hint">{{ 'Job details button text' |trans }}</span>
{{ pimcore_input("details_button_text") }}
</div>
</div>
<div class="flex-col offset-bottom-single">
<div class="col xs-12 m-6 l-3">
<span class="hint">{{ 'Header Image 1 mapping' |trans }}</span>
{{ pimcore_input("loga_header_image_1_mapping") }}
</div>
<div class="col xs-12 m-6 l-3">
<span class="hint">{{ 'Header Image 1' |trans }}</span>
{{ pimcore_image("loga_header_image_1", {
"title": "Drag your image here",
"thumbnail": "jobDetailHeader"~ bundleName,
"reload": true
}) }}
</div>
</div>
<div class="flex-col offset-bottom-single">
<div class="col xs-12 m-6 l-3">
<span class="hint">{{ 'Header Image 2 mapping' |trans }}</span>
{{ pimcore_input("loga_header_image_2_mapping") }}
</div>
<div class="col xs-12 m-6 l-3">
<span class="hint">{{ 'Header Image 2' |trans }}</span>
{{ pimcore_image("loga_header_image_2", {
"title": "Drag your image here",
"thumbnail": "jobDetailHeader"~ bundleName,
"reload": true
}) }}
</div>
</div>
{% else %}
{% if status == true %}
{% if(detailsButtonText is not empty) %}
{% set buttonText = detailsButtonText %}
{% else %}
{% set buttonText = 'Job Details' |trans %}
{% endif %}
<div class="section">
<div class="main-content">
<div class="filters">
<div class="form-field label">
<span>{{ "job.filter.currently_looking_for"|trans }}</span>
</div>
<div class="form-field">
<select id="titleFilter" name="titleFilter">
<option value="">{{ "job.filter.title"|trans }}</option>
</select>
</div>
<div class="form-field">
<select id="rangeFilter" name="rangeFilter">
<option value="">{{ "job.filter.range"|trans }}</option>
</select>
</div>
<div class="form-field">
<select id="departmentFilter" name="departmentFilter">
<option value="">{{ "job.filter.department"|trans }}</option>
</select>
</div>
<div class="form-field">
<select id="locationFilter" name="locationFilter">
<option value="">{{ "job.filter.location"|trans }}</option>
</select>
</div>
<div class="form-field">
<select id="careerLevelFilter" name="careerLevelFilter">
<option value="">{{ "job.filter.careerLevel"|trans }}</option>
</select>
</div>
</div>
<table class="table-jobs" class="display" width="100%" id="jobstable-{{ info.index }}">
<thead>
<tr>
<th>{{ 'Job Title' |trans }}</th>
<th>{{ 'Contract type' |trans }}</th>
<th>{{ 'Location' |trans }}</th>
<th>{{ 'Fields of working' |trans }}</th>
<th></th>
<th style="display:none;"></th>
</tr>
</thead>
<tbody>
{% for job in jobs %}
<tr>
<td class="job-title">{{ job.title }}</td>
<td class="job-range">{{ job.range }}</td>
<td class="job-location">{{ job.location }}</td>
<td class="job-department">{{ job.department }}</td>
<td class="job-link"><a href="{{ job.url }}" class="button btn-default" target="_blank">{{ buttonText }}</a></td>
<td style="display:none;" class="job-career-level">{{ job.careerLevel }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
<script>
document.onreadystatechange = function () {
if (document.readyState == "complete") {
var table{{ info.index }} = $('#jobstable-{{ info.index }}').DataTable(
{
"paging": false,
"language": {
"url": "//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/German.json"
},
initComplete: function () {
this.api().columns().every(function () {
var mapping = {
0: "#titleFilter",
1: "#rangeFilter",
3: "#departmentFilter",
2: "#locationFilter",
5: "#careerLevelFilter"
}
var column = this;
if (mapping[column.index()] !== undefined) {
var select = $(mapping[column.index()])
.on('change', function () {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);
column
.search(val ? '^' + val + '$' : '', true, false)
.draw();
});
column.data().unique().sort().each(function (d, j) {
select.append('<option value="' + d + '">' + d + '</option>')
});
}
});
}
});
}
};
</script>
{% else %}
<p>{{ 'Job service currrently unavailable. Please refresh.' |trans }}</p>
{% endif %}
{% endif %}