{% extends 'base.html.twig' %}
{% block headplus %}
{% block meta_description %}
<meta name="description" content="{{masjid.translate(app.request.locale).getName() }}" />
{% endblock %}
<meta name="keywords" content="{{masjid.translate(app.request.locale).getName() }}" />
<!-- Open Graph / Facebook -->
<meta property="og:type" content="article" />
<meta property="og:url" content="{{absolute_url(path('masjid_show',{'slug':masjid.slug}))}}" />
<meta property="og:title" content="{{masjid.translate(app.request.locale).getName() }}" />
<meta property="og:description" content="sharjah-masjids.com - {{masjid.translate(app.request.locale).getName() }} " />
<meta property="og:locale" content="{{app.request.locale}}" />
<meta property="og:site_name" content="https://sharjah-masjids.com/" />
<meta property="og:image" content="{{absolute_url(asset(masjid.MainPic|imagine_filter('sharer')))}}" />
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="{{absolute_url(path('masjid_show',{'slug':masjid.slug}))}}">
<meta property="twitter:title" content="{{masjid.translate(app.request.locale).getName() }}">
<meta property="twitter:description" content="sharjah-masjids.com - {{masjid.translate(app.request.locale).getName() }} ">
<meta property="twitter:image" content="{{absolute_url(asset(masjid.MainPic|imagine_filter('sharer')))}}">
{% endblock %}
{% trans_default_domain 'messages' %}
{% set page = "masjid" %}
{% block stylesheets %}
{{ parent() }}
<style type="text/css">
.slick-list, .slick-slider {
text-align: center;
}
</style>
<link href="{{asset('css/sidebar-widget.css')}}" rel="stylesheet">
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.8.0-beta.1/leaflet.min.css" />
{% endblock %}
{% block title %}{{masjid.translations[app.request.locale].name}}{% endblock %}
{% block body %}
<!--KODE SAB BANNER WRAP START-->
<div class="kode_sab_banner_wrap them_overlay">
<!--CONTAINER START-->
<div class="container">
<div class="sab_banner_text">
<h1>{{ masjid.translate(app.request.locale).getName() }}</h1>
<ul class="breadcrumbs">
<li><a href="{{ path('app_front_main_index') }}"><i class="fa fa-home"></i></a></li>
<li><a href="{{ path('masjid_index') }}">{{ "masjid.masjids"|trans }}</a></li>
<li><strong>{{ masjid.translate(app.request.locale).getName() }}</strong></li>
</ul>
</div>
</div>
<!--CONTAINER END-->
</div>
<!--KODE SAB BANNER WRAP END-->
<!--KODE BLOG MADIUM WRAP START-->
<div class="kode_blog_madium_wrap detail padding">
<!--CONTAINER START-->
<div class="container">
<div class="row">
<div class="col-md-8">
<!--KODE BLOG DETAIL ROW START-->
<div class="kode_blog_detail_row">
<!--KODE BLOG DETAIL DES START-->
<div class="kode_team_wrap">
<!--CONTAINER START-->
<div class="container">
<!--SECTION HDG START-->
<div class="section_hdg hdg_2 hdg_3">
<h3>{{ 'Pictures of Masjid'|trans }} {{ masjid.translations[app.request.locale].name }}</h3>
<span><i class="fa icon-art"></i></span>
</div>
<!--SECTION HDG END-->
<div class="kode-team-slide">
{% if masjid.pictures|length > 0 %}
{% for pic in masjid.pictures %}
<div>
<div class="kode_tem_fig">
<figure>
<img src="{{ pic.path|imagine_filter('slide')}}" alt="{{ masjid.translations[app.request.locale].name }}" alt="{{ masjid.translations[app.request.locale].name }}">
<figcaption>
<!--<h4>{{ pic.title }}</h4>
<p>{{ pic.caption }}</p>-->
<ul class="kode_social_icon">
<li>
<a class="hvr-ripple-out"
href="http://www.facebook.com/sharer.php?u={{absolute_url(path('masjid_show',{'slug':masjid.slug}))}}"
onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;">
<i class="fa fa-facebook"></i>
</a>
</li>
<li>
<a class="hvr-ripple-out"
href="https://twitter.com/share?url={{absolute_url(path('masjid_show',{'slug':masjid.slug}))}}"
onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;">
<i class="fa fa-twitter"></i>
</a>
</li>
</ul>
</figcaption>
</figure>
</div>
</div>
{% endfor %}
{% else %}
<div>
<i class="fa icon-art" style="font-size:200px" aria-hidden="true"></i>
</div>
{% endif %}
</div>
</div>
<!--CONTAINER END-->
</div>
<div class="kode_blog_detail_des">
<div class="kode_blog_detail_text">
<h3><a href="#">{{ masjid.translate(app.request.locale).getName() }}</a></h3>
<ul class="kode_meta meta_2">
<li><i class="fa fa-clock-o"></i>{{ masjid.dateOfConsctruct|date('d-m-Y') }}</li>
<li><i class="fa fa-user"></i> {{ "masjid.show.byAuthor"|trans }} Admin</li>
<li><a href="#comments_anchor"><i class="fa fa-comment"></i>{{ "masjid.show.leaveComment"|trans }}</a></li>
</ul>
</div>
</div>
<!--KODE BLOG DETAIL DES END-->
<blockquote class="blog_quote">
<span><i class="fa icon-art"></i></span>
<div class="quote_text">
<ul>
<li> {{ "masjid.show.info.comm"|trans }} <a href="{{ path('community_show',{slug:masjid.community.slug})}}">{{ masjid.community.translations[app.request.locale].name}}</a></li>
<!--<li>{{ "masjid.show.info.date"|trans }} {{ masjid.dateOfConsctruct|date('d-m-Y') }}</li>-->
<li>{{ "masjid.show.info.style"|trans }} {{ masjid.style }}</li>
<!-- <li>{{ "masjid.show.info.surface"|trans }} {{ masjid.surface }}</li>-->
<!-- <li>{{ "masjid.show.info.height"|trans }} {{ masjid.height }}</li>-->
{% if masjid.isWomen %} <li><i class="fa fa-female"></i> {{ "masjid.show.info.lady"|trans }}</li>{% endif %}
{% if masjid.isJumah %}<li><i class="fa icon-art"></i> {{ "masjid.show.info.jumah"|trans }} </li>{% endif %}
{% if masjid.isEnglish %}<li><i class="fa fa-language"></i> {{ "masjid.show.info.english"|trans }} </li>{% endif %}
</ul>
</div>
</blockquote>
<p class="blog_text">
{{ masjid.description }}
</p>
<!--KODE DETAIL FIG START-->
<div class="kode_contact_map">
<div id="map-canvas" class="map-canvas"></div>
</div>
<!--KODE DETAIL FIG FIG 2 END-->
<!--KODE SOCIAL SHARE START-->
<div class="kode_social_share">
<a href="#"><i class="fa fa-share-alt"></i>{{ "masjid.show.share"|trans }}</a>
<ul class="social_meta">
<li><a class="hvr-ripple-out" href="http://www.facebook.com/sharer.php?u={{absolute_url(path('masjid_show',{'slug':masjid.slug}))}}" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;"><i class="fa fa-facebook"></i></a></li>
<li><a class="hvr-ripple-out" href="https://twitter.com/share?url={{absolute_url(path('masjid_show',{'slug':masjid.slug}))}}" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;"><i class="fa fa-twitter"></i></a></li>
</ul>
<!--KODE PAGINATION START-->
<div class="kode_pagination">
{% if masjidPrev is not null %}<a class="prve" href="{{ path('masjid_show',{slug:masjidPrev.slug}) }}"><i class="fa fa-arrow-left"></i>{{ 'masjid.pagination.prev'|trans }}</a>{% endif %}
{% if masjidNext is not null %}<a class="next" href="{{ path('masjid_show',{slug:masjidNext.slug}) }}">{{ 'masjid.pagination.next'|trans }}<i class="fa fa-arrow-right"></i></a>{% endif %}
</div>
<!--KODE PAGINATION END-->
</div>
<!--KODE SOCIAL SHARE END-->
<!--KODE COMMENTS MARGIN START-->
<div id="comments_anchor" class="kode_comments margin">
<h4 class="comment_title">{{ pagination|length }} {{ "masjid.show.comment"|trans }}{% if pagination|length > 1 %}s {% endif %}</h4>
<ul id="kode-comment" class="comment">
{% for comment in pagination %}
<li>
<div class="comment_des {% if loop.last %} {% else %}padding {% endif %}">
<figure class="them_overlay">
<img src="{{ asset('extra-images/comment.jpg') }}" alt="comment on sharjah-masjids.com ">
</figure>
<div class="comment_text">
<p>{{ comment.content }}</p>
<ul class="kode_meta">
<li><a href="#"><i class="fa fa-user"></i>{{ comment.author.name|title }}</a></li>
</ul>
</div>
</div>
</li>
{% else %}
<li><em>{{ 'no comment found'|trans }}</em></li>
{% endfor %}
</ul>
</div>
<!--KODE COMMENTS MARGIN END-->
{{ render(controller('App\\Controller\\Front\\CommentController::new', {masjidid: masjid.id})) }}
<!--KODE COMMENTS MARGIN START-->
<!--KODE COMMENTS MARGIN END-->
<!--ROW START-->
<div class="row">
<div class="kode_blog_detail_post">
<div class="col-md-12">
<!--SECTION HDG START-->
<div class="section_hdg">
<h3>{{ 'about.random.mosque'|trans }}</h3>
<span><i class="fa icon-art"></i></span>
</div>
<!--SECTION HDG END-->
</div>
{% for masjid in masjidRandom %}
<div class="col-md-6">
<div class="kode_blog_des des_2">
<figure class="them_overlay">
<img src="{{ masjid.MainPic|imagine_filter('more') }}" width="350px" height="272px" alt="sharjah-masjids.com - {{masjid.translations[app.request.locale].name}}">
<a class="expand_btn btn_hover2" href="{{path('masjid_show',{'slug':masjid.slug})}}"><i class="fa icon-arrows-1"></i></a>
</figure>
<div class="kode_blog_text">
<h4><a href="{{path('masjid_show',{'slug':masjid.slug})}}"><span>{{ masjid.translations[app.request.locale].name }}</a></h4>
<div class="kode_blog_caption">
<ul class="kode_meta meta_2">
<li><a href="{{path('community_show',{slug:masjid.community.slug})}}"><i class="fa icon-art"></i>{{ masjid.community.translations[app.request.locale].name }}</a></li>
<li><a href="{{path('masjid_show',{slug:masjid.slug})}}"><i class="fa fa-camera"></i>{{ masjid.pictures|length }}</a></li>
</ul>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
<!--ROW END-->
</div>
<!--KODE BLOG DETAIL ROW END-->
</div>
{{ render(controller("App\\Controller\\Front\\MainController::sidebar", { 'masjidId': masjid.id }) )}}
</div>
</div>
<!--CONTAINER END-->
</div>
<!--KODE BLOG MADIUM WRAP END-->
{% endblock %}
{% block javascripts %}
{{ parent() }}
<!--js/jquery.downCount.js start-->
<script src="{{ asset('js/jquery.dlmenu.js') }}"></script>
<!--Map-->
<script src = "https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.8.0-beta.1/leaflet.min.js"></script>
<script>
// Creating map options
var mapOptions = {
center: [{{masjid.latitude}}, {{masjid.longitude}}],
zoom: 17
}
// Creating a map object
var map = new L.map('map-canvas', mapOptions);
// Creating a Layer object
var layer = new L.TileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
// Adding layer to the map
map.addLayer(layer);
var thisIcon = new L.Icon({
iconUrl: "{{asset('images/map_icon.png')}}",
iconAnchor: new L.Point(40, 40),
});
let iconOptions = {
title: "{{masjid.translations[app.request.locale].name}}",
icon: thisIcon
}
let marker = new L.Marker([{{masjid.latitude}}, {{masjid.longitude}}] , iconOptions);
marker.addTo(map);
</script>
{% endblock %}