{% extends 'base.html.twig' %}
{% block title %}
{{ 'school_life'|trans }}
{% endblock %}
{% block css %}
<style>
.ck.ck-editor__main>.ck-editor__editable:not(.ck-focused){
border-color: transparent!important;
}
.ck.ck-editor__main>.ck-editor__editable:not(.ck-editor__nested-editable).ck-focused{
border: transparent!important;
}
@media screen and (max-width: 767px) {
.imgDiv{order: 1}
.textDiv{
order: 2;
}
}
.overlay {
position: absolute;
height: 100%;
width: 100%;
opacity: 0.3;
transition: .3s ease;
background-color: transparent;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.overlay:hover {
opacity: 0.7;
}
.gal_btn {
position: absolute;
z-index: 2;
}
.fa-images{
color: {% if first_color != ''%}{{first_color}}{% else %}#7f3e98{% endif %}!important;
}
.container2 {
display: flex;
flex-direction: column;
width: 100%;
height: 300px;
background: #fff;
padding: 0;
}
.row2 {
display: flex;
flex-direction: row;
width: 100%;
height: 100%;
}
.item {
min-width: 50px;
min-height: 50px;
width: 33%;
background: white;
padding: 20px;
}
a.item:nth-child(1){
margin-right: 1px;
}
a.item:nth-child(2){
margin-right: 1px;
margin-left: 1px;
}
a.item:nth-child(3){
margin-right: 1px;
margin-left: 1px;
}
a.item:nth-child(3){
margin-right: 1px;
margin-left: 1px;
}
a.row:nth-child(1){
margin-bottom: 1px;
}
a.row:nth-child(3){
margin-top: 1px;
}
.item img{
max-width: 100%;
}
@media (max-width: 425px){
.item img{
max-width: 100px;
}
}
.tooltip.show {
opacity: 1;
}
.tooltip-inner {
background-color: #e5e5e5;
box-shadow: 0px 0px 4px black;
opacity: 1 !important;
}
</style>
{% endblock %}
{% block body %}
<div class=" d-flex flex-column flex-row-fluid">
<div class="card-body row pt-head">
<div class="row container-fluid " style="">
{% if page_mission is not null %}
<div class="container scrool-div" id="{{ page_mission.slug }}">
<h2 class="bold text-center text-primary mb-5">{{ page_mission.name }}</h2>
<div class="ck ck-content ck-editor__editable ck-rounded-corners ck-editor__editable_inline ck-read-only ck-blurred" lang="en" dir="ltr" role="textbox" aria-label="Rich Text Editor, main" contenteditable="false">
{{ page_mission.richText|raw }}
</div>
</div>
{% endif %}
</div>
<div class="row container-fluid " style="">
{% if page_infrastructure is not null %}
<div class="container scrool-div" id="{{ page_infrastructure.slug }}">
<h2 class="bold text-center text-primary mb-5">{{ page_infrastructure.name }}</h2>
<div class="row mt-4">
{% for c in infras %}
<div class="row p-4 mb-8" style="border-style: solid;border-width: 1px;border-color: #b3b2b2;background-color:
{% if loop.index %2 == 1 %}
{% if first_color != ''%}{{first_color}}{% else %}#7f3e98{% endif %}14 !important;
{% else %}
#fff
{% endif %};box-shadow: 10px 10px 5px #b1b1b1;
">
{% if loop.index % 2 == 0 %}
<div class="col-md-8 col-lg-8 textDiv">
<h3 class="title">
{{ c.name }}
</h3>
<div class="row ck ck-content ck-editor__editable ck-rounded-corners ck-editor__editable_inline ck-read-only ck-blurred">
{{ c.description|raw }}
</div>
</div>
<div class="col-md-4 col-lg-4 imgDiv">
{% if c.image2 != '' or c.image3 != '' %}
<button class="gal_btn btn btn-outline" type="button" data-bs-toggle="modal" data-bs-target="#exampleModal--in-{{ c.id }}">
<i style="font-size: 32px;" class="fa fa-images fa-3x"></i>
</button>
{% endif %}
{% if c.image =='' %}
<img style="width: 100%" src="{{ asset('assets/media/avatars/hobby.jpeg') }}" alt="{{ c.name }}"/>
{% else %}
<img style="width: 100%" src="{{ asset('uploads/'~c.image) }}" alt="{{ c.name }}"/>
{% endif %}
</div>
{% else %}
<div class="col-md-4 col-lg-4 imgDiv ">
{% if c.image2 != '' or c.image3 != '' %}
<button type="button" class="gal_btn btn btn-outline" data-bs-toggle="modal" data-bs-target="#exampleModal--in-{{ c.id }}">
<i style="font-size: 32px;" class="fa fa-images fa-3x"></i>
</button>
{% endif %}
{% if c.image =='' %}
<img style="width: 100%" src="{{ asset('assets/media/avatars/hobby.jpeg') }}" alt="{{ c.name }}"/>
{% else %}
<img style="width: 100%" src="{{ asset('uploads/'~c.image) }}" alt="{{ c.name }}"/>
{% endif %}
</div>
<div class="col-md-8 col-lg-8 textDiv ">
<h3 class="title">
{{ c.name }}
</h3>
<div class="row ck ck-content ck-editor__editable ck-rounded-corners ck-editor__editable_inline ck-read-only ck-blurred">
{{ c.description|raw }}
</div>
</div>
{% endif %}
</div>
{% endfor %}
</div>
{% for c in infras %}
<div class="modal fade" data-bs-focus="false" id="exampleModal--in-{{ c.id }}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 style="" class="modal-title mt-1 ml-1" >{{ c.name }}</h5>
<button type="button" class="btn btn-primary close" data-bs-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="carousel slide carousel-fade" data-bs-ride="carousel" data-bs-interval="4000">
<div class="carousel-inner">
{% if c.image2 != '' %}
<div class="carousel-item {% if c.image2 != '' and c.image3 != ''%} active {% elseif c.image3 == '' %} active{% endif%} ">
<img src="{{ asset('uploads/'~c.image2) }}" class="d-block w-100" alt="">
</div>
{% endif %}
{% if c.image3 != '' %}
<div class="carousel-item {% if c.image2 == '' %}active{% endif%}">
<img src="{{ asset('uploads/'~c.image3) }}" class="d-block w-100" alt="">
</div>
{% endif %}
{% if c.image != '' %}
<div class="carousel-item">
<img src="{{ asset('uploads/'~c.image) }}" class="d-block w-100" alt="">
</div>
{% endif %}
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#exampleModal--{{ c.id }}" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#exampleModal--{{ c.id }}" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ 'close'|trans }}</button>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
{% endif %}
</div>
<div class="row container-fluid" style="margin-top: 80px;">
{% if page_activity is not null %}
<div class="container scrool-div" id="{{ page_activity.slug }}">
<h2 class="bold text-center text-primary mb-5 mt-5">{{ page_activity.name }}</h2>
<div class="accordion" id="kt_accordion_1">
{% for c in clubs %}
<div class="accordion-item">
<h1 class="accordion-header" id="kt_accordion_1_header_{{ c.id }}">
<button style="color: {% if first_color != ''%}{{first_color}}{% else %}#7f3e98{% endif %}!important;" class="accordion-button fs-4 fw-bold " type="button" data-bs-toggle="collapse" data-bs-target="#kt_accordion_1_body_{{ c.id }}" aria-expanded="true" aria-controls="kt_accordion_1_body_{{ c.id }}">
{{ c.name }}
</button>
</h1>
<div id="kt_accordion_1_body_{{ c.id }}" class="accordion-collapse collapse {% if loop.index ==1 %} show {% endif %}" aria-labelledby="kt_accordion_1_header_{{ c.id }}" data-bs-parent="#kt_accordion_1">
<div class="accordion-body row">
<div class="col-md-8 col-lg-8">
<div style="width: 100%" class="ck ck-content ck-editor__editable ck-rounded-corners ck-editor__editable_inline ck-read-only ck-blurred">
{{ c.description|raw }}
</div>
</div>
<div class="col-md-4 col-lg-4">
{% if c.image =='' %}
<img style="width: 100%" src="{{ asset('assets/media/avatars/hobby.jpeg') }}" alt="{{ c.name }}"/>
{% else %}
<img style="width: 100%" src="{{ asset('uploads/'~c.image) }}" alt="{{ c.name }}"/>
{% endif %}
</div>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
{% endif %}
</div>
<div class="row container-fluid " style="margin-top: 80px;">
{% if page_partner is not null %}
<div class="container scrool-div" id="{{ page_partner.slug }}">
<h2 class="bold text-center text-primary mb-5 mt-5">{{ page_partner.name }}</h2>
<div class="row mt-4">
<div class="row no-gutters clients-wrap clearfix mt-10">
{% for c in partners %}
<div class="col-lg-4 col-md-6 col-6 mb-3">
<div class="client-logo" style="display: grid">
<button style="padding: 0!important;" type="button" class="btn " data-bs-toggle="modal" data-bs-target="#exampleModal--{{ c.id }}">
{% if c.image != '' %}
<img style="max-width: 150px;max-height: 150px; width: 100px; height: auto" src="{{ asset('uploads/'~c.image) }}" class="img-fluid" alt="">
{% else %}
<img style="max-width: 150px;max-height: 150px; width: 100px; height: auto" src="{{ asset('assets/media/avatars/partner.png') }}" class="img-fluid" alt="">
{% endif %}
</button>
<button type="button" class="btn fs-5" data-toggle="modal" data-target="#exampleModal--{{ c.id }}">
{{ c.name }}
</button>
</div>
</div>
{% endfor %}
</div>
{% for c in partners %}
<div class="modal fade" data-bs-focus="false" id="exampleModal--{{ c.id }}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
{% if c.image != '' %}
<img style="max-width: 50px;max-height: 50px; width: 50px; height: auto" src="{{ asset('uploads/'~c.image) }}" class="img-fluid" alt="">
{% endif %}
<h5 style="" class="modal-title mt-1 ml-1" id="exampleModalLabel">{{ c.name }}</h5>
<button type="button" class="btn btn-primary close" data-bs-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
{% if c.description != null or c.description != '' %}
<div class="card">
<div class="card-body" class="ck ck-content ck-editor__editable ck-rounded-corners ck-editor__editable_inline ck-read-only ck-blurred">
<h6><a></a>{{ 'description'|trans }}</h6>
{{ c.description|raw }}
</div>
</div>
{% endif %}
{% if c.website != null or c.socialMedialink != '' %}
<div class="card mt-3" >
<div class="card-body">
<h6><a></a>{{ 'link'|trans }}</h6>
{% if c.socialMedialink != '' %}
<a class="btn btn-link" target="_blank" href="{{ c.socialMedialink }}">{{ c.socialMedialink }}</a>
<br/>
{% endif %}
{% if c.website != '' %}
<a class="btn btn-link" target="_blank" href="{{ c.website }}">{{ c.website }}</a>
{% endif %}
</div>
</div>
{% endif %}
{% if c.phone != null or c.phone != '' %}
<div class="card mt-3" >
<div class="card-body">
<h6><a></a>{{ 'phone'|trans }}</h6>
<a class="btn btn-link" href="tel:{{ c.phone }}">{{ c.phone }}</a>
</div>
</div>
{% endif %}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ 'close'|trans }}</button>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
{% endif %}
</div>
</div>
</div>
<div class="modal fade" data-bs-focus="false" tabindex="-1" id="kt_modal_show">
<div class="modal-dialog modal-fullscreen">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modal_show_title">
<span class="fa fa-spin fa-satellite"></span>
</h5>
<div class="btn btn-icon btn-sm btn-active-light-primary ms-2" data-bs-dismiss="modal" aria-label="Close">
<span class="fa fa-window-close"></span>
</div>
<!--end::Close-->
</div>
<div class="modal-body">
<div class=" d-flex flex-column flex-row-fluid " id="modal_show_img">
</div>
<div class=" d-flex flex-column flex-row-fluid" id="modal_show_content">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light" data-bs-dismiss="modal">{{ 'close'|trans }}</button>
</div>
</div>
</div>
</div>
{% endblock %}
{% block js %}
<script src="{{ asset('assets/plugins/custom/ckeditor/ckeditor-classic.bundle.js') }}"></script>
<script>
$(document).ready(function (){
})
</script>
<script>
$(document).ready(function (){
let modalShow = bootstrap.Modal.getOrCreateInstance(document.getElementById('kt_modal_show'));
$(modalShow).on('hidden.bs.modal', function (event) {
;
$('#modal_show_title').html('<span class="fa fa-spin fa-satellite"></span>');
$('#modal_show_content').html('');
$('#modal_show_img').html('');
});
$('.btn-show').on('click', function () {
let url = "{{ path('get_one_entity',{'entity':'story','id':'00000'}) }}";
url = url.replace('00000',this.getAttribute('data-id'));
$.ajax({
url: url,
type: 'GET',
dataType: 'json',
success: function(res){
$('#modal_show_title').html(res.data.story_date);
$('#modal_show_content').html(res.data.description);
if(res.data.image !== ""){
let img='<img class="img-responsive img" style="max-width: 400px;max-height: 300px" src="'+"{{ asset('uploads/') }}"+res.data.image +'"'+' />';
$('#modal_show_img').html(img);
}
else{
$('#modal_show_img').html('');
}
modalShow.show();
},
error :function (error) {
Swal.fire({
text: "{{ 'object_not_found'|trans }}",
icon: "error",
buttonsStyling: false,
confirmButtonText: "{{ 'close'|trans }}",
customClass: {
confirmButton: "btn btn-primary"
}
});
}
});
});
})
</script>
{% endblock %}