{% extends "base.html.twig" %}
{% block body %}
{% embed "1-col-sidebar.html.twig" %}
{% block column %}
{% if site_code == constant("App\\Entity\\Content::SITE_RCS") %}
{% include "includes/curtain-ads/classified.html.twig" %}
{% elseif site_code == constant("App\\Entity\\Content::SITE_MCS") %}
{% include "includes/curtain-ads/classified-mcs.html.twig" %}
{% endif %}
<div class="row">
<div class="col-12">
<h1>Classifieds By Region</h1>
</div>
</div>
<div class="row">
<div class="col-md-12" style="text-align: center; padding-top: 10px;">
{% include "includes/classified-image-map.html.twig" %}
{#<img
src="/assets/img/classified-image-map.png"
alt="Classified Listings"
class="d-block mx-auto"
loading='lazy'
/>#}
</div>
</div>
<div class="row">
<div class="col-sm-12">
<h2>Classified Listings</h2>
</div>
{#
<div class="col-sm-6">
<a href="/classified-policy" class="float-right">Read our Classified Policy</a>
</div>
#}
</div>
<form id="classified-sort">
<input type="hidden" name="page" id="page" />
<input type="hidden" name="group" value="{{ group }}" />
<div class="row">
<div class="col-sm-12">
<div class="grey-block mb-3 search-classifieds">
<div class="row mb-3">
<div class="col-sm-6">
<input
type="text"
class="form-control"
placeholder="Keywords & Trade Names"
name="keywords"
value="{{ keywords }}"
/>
</div>
<div class="col-sm-6">
<input
type="text"
class="form-control"
placeholder="Location"
name="location"
value="{{ location }}"
/>
</div>
</div>
<select name="category" class="form-control">
<option value="">-- Choose a Category --</option>
{% for cat in listingCategories %}
<option
value="{{ cat.getId() }}"
{% if cat.getId() == category %}
selected
{% endif %}
>{{ cat.getTitle() }}</option>
{% endfor %}
</select>
</div>
<div class="row classifieds-locale">
<div class="col-sm-12 listing-country listing-canada">
<b>Canada</b>
<ul class="nav">
{% for area in listingAreas %}
{% if 'Canada' in area.getTitle() %}
<li class="mr-3">
<label><input
type="checkbox"
name="area[]"
value="{{ area.getId() }}"
id="{{ area.getTitle()|trim('Canada: ', 'left')|replace({' ': '', ',': ''}) }}"
{% if area.getId() in areas %}
checked
{% endif %}
/> {{ area.getTitle()|trim('Canada: ', 'left') }}</label>
</li>
{% endif %}
{% endfor %}
</ul>
</div>
<div class="col-sm-12 listing-country listing-us">
<b>United States</b>
<ul class="nav">
{% for area in listingAreas %}
{% if 'Canada' not in area.getTitle() %}
<li class="mr-3">
<label><input
type="checkbox"
name="area[]"
value="{{ area.getId() }}"
id="{{ area.getTitle() }}"
{% if area.getId() in areas %}
checked
{% endif %}
/> {{ area.getTitle() }}</label>
</li>
{% endif %}
{% endfor %}
</ul>
</div>
{#
<div class="col-sm-4">
<button
class="btn btn-block btn-primary float-right"
type="submit"
><i class="fa fa-search"></i> Search Listings</button>
</div>
#}
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12 mt-3">
<hr />
</div>
</div>
{% if totalListings %}
<div class="row">
<div class="col-sm-12">
<div class="pagination float-right">
{% set paging = (page == "_") ? 0 : page %}
<div class="input-group">
<div class="input-group-prepend px-3">
<span>
Showing:
{{ paging * pagingSize + 1 }} -
{% if totalListings < (paging * pagingSize + pagingSize) %}
{{ totalListings }}
{% else %}
{{ paging * pagingSize + pagingSize }}
{% endif %}
of
{{ totalListings }}
</span>
</div>
<div class="button-group input-group-append paging">
{% if 0 < paging %}
<button class="btn paging" value="{{ paging - 1 }}">
<i class="fa fa-chevron-left"></i>
</button>
{% endif %}
{% if (paging * pagingSize + pagingSize) < totalListings %}
<button class="btn paging" value="{{ paging + 1 }}">
<i class="fa fa-chevron-right"></i>
</button>
{% endif %}
</div>
</div>
</div>
</div>
</div>
{% else %}
<div class="row">
<div class="col-sm-12 text-center">
<div class="alert alert-warning mb-0"><i class="fa fa-exclamation-triangle"></i> No Records Found</div>
</div>
</div>
{% endif %}
<div class="row">
<div class="col-sm-12">
<hr style="margin-bottom: 0;" />
</div>
</div>
<div class="row">
<div class="col-sm-12">
{% for listing in listings %}
{#<a href="{{ listing.getURL() }}" class="no-style">#}
<div class="row classified-index-row py-1{{ 0 < listing.getFeatured() ? ' featured' : '' }}" style="min-height:200px;"
{% if listing.getVideoMedia() %}
data-video-row="{{listing.getVideoMedia().getId()}}"
{% endif %}
>
{% if listing.getFeaturedImageTag() or listing.getVideoMediaTag() %}
{% if listing.hasVideoMedia() %}
<div class="col-sm-2">
<a href="{{ listing.getURL() }}?autoplay=1" class="no-style">
<div class="ytThumbContainer ytThumbContainer-small">
{#{{ listing.getFeaturedImageTag("ytThumbnail","")|raw }}#}
{% set mURL = "" %}
{% if listing.getMedia() %}
{% set mURL = listing.getMedia().getURL() %}
{% endif %}
{{ listing.getVideoMediaTag("","max-height:165px;", false, false, true, mURL)|raw }}
</div>
</a>
</div>
<script>
/*
var video = document.querySelector("[data-video-mid='{{listing.getVideoMedia().getId()}}']");
var videoDiv = document.querySelector("[data-video-row='{{listing.getVideoMedia().getId()}}']");
videoDiv.addEventListener("mouseover", console.log("test"), true);
//videoDiv.addEventListener("mouseover", video.play(), false);
//videoDiv.addEventListener("mouseout", video.pause(), false);
*/
</script>
{% else %}
<div class="col-sm-2">
<a href="{{ listing.getURL() }}" class="no-style">
{{ listing.getFeaturedImageTag("","max-height:165px;")|raw }}
</a>
</div>
{% endif %}
<div class="col-sm-4">
<a href="{{ listing.getURL() }}" class="no-style">
<h4 class="mb-0">{{ listing.getTitle() | raw }}</h4>
{% set company_name = listing.getContentMetaValueByKey("_company_name") %}
{% if company_name is not empty %}
<p>{{ company_name | raw }}</p>
{% endif %}
</a>
</div>
<div class="col-sm-3">
<a href="{{ listing.getURL() }}" class="no-style">
{% set jobLocation = listing.getContentMetaByKey("_job_location") %}
{{ jobLocation ? jobLocation.getMetaValue() : "" }}
</a>
</div>
{% else %}
<div class="col-sm-6">
<a href="{{ listing.getURL() }}" class="no-style">
<h4 class="mb-0">{{ listing.getTitle() | raw }}</h4>
<p>{{ listing.getContentMetaValueByKey("_company_name") | raw }}</p>
</a>
</div>
<div class="col-sm-3">
<a href="{{ listing.getURL() }}" class="no-style">
{% set jobLocation = listing.getContentMetaByKey("_job_location") %}
{{ jobLocation ? jobLocation.getMetaValue() : "" }}
</a>
</div>
{% endif %}
<div class="col-sm-3">
<a href="{{ listing.getURL() }}" class="no-style">
<div>
{% set jobType = listing.getSecondaryCategoriesByTaxonomy("job_listing_type") %}
{% if 1 < jobType | length %}
<strong>Multiple</strong>
{% else %}
{% if jobType.first() %}
<strong>{{ jobType.first().getTitle() }}</strong>
{% endif %}
{% endif %}
</div>
{{ post_age_format(date(listing.getPublishedAt()|date).diff(date("now"))) }}
</a>
</div>
</div>
{#</a>#}
<hr class="m-0" />
{% endfor %}
</div>
</div>
{% if totalListings %}
<div class="row">
<div class="col-sm-12">
<div class="pagination float-right">
{% set paging = (page == "_") ? 0 : page %}
<div class="input-group">
<div class="input-group-prepend px-3">
<span>
Showing:
{{ paging * pagingSize + 1 }} -
{% if totalListings < (paging * pagingSize + pagingSize) %}
{{ totalListings }}
{% else %}
{{ paging * pagingSize + pagingSize }}
{% endif %}
of
{{ totalListings }}
</span>
</div>
<div class="button-group input-group-append paging">
{% if 0 < paging %}
<button class="btn paging" value="{{ paging - 1 }}">
<i class="fa fa-chevron-left"></i>
</button>
{% endif %}
{% if (paging * pagingSize + pagingSize) < totalListings %}
<button class="btn paging" value="{{ paging + 1 }}">
<i class="fa fa-chevron-right"></i>
</button>
{% endif %}
</div>
</div>
</div>
</div>
</div>
{% endif %}
</form>
<script>
(function($){
$(function(){
$('[data-video-row]').each(function() {
//$video = $(this).find('video').first();
$(this).on('mouseover', function() {
$(this).find('video').first()[0].play();
$(this).find('.ytThumbContainer').first().stop(true,true).addClass('ytThumbContainer-playing', 500);
//console.log($video);
//console.log($(this).attr("data-video-row"));
});
$(this).on('mouseleave', function() {
//$(this).find('video').first()[0].pause();
//$(this).find('video').first()[0].currentTime=0;
$(this).find('video').first()[0].load();
$(this).find('.ytThumbContainer').first().stop(true,true).removeClass('ytThumbContainer-playing', 100);
});
});
/*
$('#user-dashboard-container').on('click', '#addNote', function() {
$("#contactNotes").append(noteHtml.join(''));
$("#updateNotes").show();
});
$('#user-dashboard-container').on('click', '.deleteNote', function() {
$(this).parent().parent().remove();
});
*/
});
}(jQuery));
</script>
{% endblock %}
{% block sidebar %}
{% include "includes/sidebar.html.twig" %}
{% endblock %}
{% endembed %}
{% endblock %}