{#
 # Category template
 # ---------------
 #
 # When this template gets loaded, it will be because someone has accessed
 # http://yoursite.com/ (without any URI). Craft checks to see if you have
 # a Single section set to be the Homepage (as you do, by default), and
 # loads the section’s Template (this file). A special ‘entry’ variable
 # will already be set for you, assigned to the Homepage entry.
 #
 # It's worth noting that even if you didn't have a Homepage Single section,
 # as long as this template remains at craft/templates/index.html, it
 # would still be the one to get loaded when accessing http://yoursite.com/,
 # albeit without an ‘entry’ variable already set for you.
 #
 # See this page for more details on how Craft routes requests:
 # http://craftcms.com/docs/routing
 #}
 
{% if entry.metaTitle|length %}
	{% set metaTitle = entry.metaTitle %}
{% else %}
	{% set metaTitle = entry.title %}
{% endif %}

{% set metaDescription = entry.metaDescription %}


{% extends "_layout" %}

{% block content %}

{% set backgroundImage = entry.backgroundImage.one() %}
<div class="container-fluid bg-light overflow-hidden  px-lg-0" style="    background: linear-gradient(rgba(53, 53, 53, .7), rgba(53, 53, 53, .7)), url({{backgroundImage.url}}) center center no-repeat;">
<div class="container feature px-lg-0">
<div class="row g-0 mx-lg-0">
	<div class="col-lg-6 feature-text py-5 wow fadeIn" data-wow-delay="0.5s">
    <div class="p-lg-5 ps-lg-0">
	    <div class="section-title text-start">
	        <h1 class="display-5 mb-4 display-3 text-white mb-3 animated slideInDown">{{entry.title}}</h1>
	    </div>                  
        <div class="text-white mb-3 animated slideInDown">
        {{entry.contentBlock}}
        </div>
    </div>
    </div>
    

               
</div>
</div>
</div>

{% if entry.widget|length %}
 <!-- Recent Projects -->
    <div class="container-xxl py-5">
        <div class="container">
            <div class="section-title text-center">
                <h1 class="display-5 mb-5">Recent Projects</h1>
            </div>
            <div class="row g-4">
    
			   <figure data-behold-id="{{entry.widget}}"></figure>
			   <script src="https://w.behold.so/widget.js" type="module"></script>
            </div>
        </div>
    </div>
{% endif %}

<div class="container-fluid  overflow-hidden  px-lg-0">
<div class="container px-lg-0">
<div class="row g-0 mx-lg-0">
	<div class="col-lg-12 py-5 wow fadeIn" data-wow-delay="0.1s">
    <div class="p-lg-5 ps-lg-0">
    <div class="row ">
    
	  {# Loop through projects in the project gallery section #}
	   {% set category = entry.projectGroup %}
	   
	   {% for block in craft.entries().section('projectGallery').projectGroup({category}).orderBy('dateCreated DESC').all() %}

	    <div class="col-md-4 col-lg-4 wow fadeInUp mb-4" data-wow-delay="0.1s">
        <div class="service-item border border-5 border-light border-top-0 h-100">
	        <div class="overflow-hidden">
	            {% set img = block.projectMainImage.one() %}
	            {% if img %}
	                <a class="fw-medium" href="#" data-bs-toggle="modal" data-bs-target="#generalRepairs-{{loop.index}}"><img class="img-fluid" src="{{ img.getUrl('gallery') }}"
								width="{{ img.getWidth('gallery') }}"
								height="{{ img.getHeight('gallery') }}"alt="{{img.title}}" /></a>
	            {% endif %}
	        </div>
	        
            <div class="p-4 text-center">
                <h4 class="mb-3">{{block.title}}</h4>
                {{block.projectDescription}}
                {% if block.projectGallery|length %}
                {% set count = 0 %}
                {% set count2 = 0 %}
                    <a class="fw-medium" href="#" data-bs-toggle="modal" data-bs-target="#generalRepairs-{{loop.index}}">View images of this project<i class="fa fa-arrow-right ms-2"></i></a>
                    
                    	<div class="modal fade" id="generalRepairs-{{loop.index}}" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
					  <div class="modal-dialog modal-lg" role="document">
					    <div class="modal-content">
					      <div class="modal-header">
					        <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
					          <span aria-hidden="true">&times;</span>
					        </button>
					      </div>
					      <div class="modal-body">
					      <div id="carouselExampleIndicators-{{block.id}}" class="carousel slide" data-bs-ride="carousel">
					  <div class="carousel-indicators">
					  {% for s in block.projectGallery %}
					  
					  	{% for slide in s.projectImages %}
					    <button type="button" data-bs-target="#carouselExampleIndicators-{{block.id}}" data-bs-slide-to="{{count}}" {% if loop.index == '1' %}class="active" aria-current="true"{% endif %} aria-label="Slide {{loop.index}}"></button>
					     {% set count = count+1 %}
					   {% endfor %}
					  {% endfor %}
					  </div>
					  <div class="carousel-inner">
					   {% for s in block.projectGallery %}
					   	
					  	{% for slide in s.projectImages %}
					    <div class="carousel-item {% if loop.index == '1'%}active{% endif %}">
					    	{% set slideImg = slide.projectImage.one() %}
					    	{% if slideImg|length %}
					    	
					    	
					    		
								
								<img class="img-fluid" src="{{ slideImg.getUrl('mediumImage') }}"
								width="{{ slideImg.getWidth('mediumImage') }}"
								height="{{ slideImg.getHeight('mediumImage') }}"alt="{{slideImg.title}}" />
						
																
								
								
							{% endif %}
						  {% if slide.projectCaption|length %}
					      <div class="carousel-caption d-none d-md-block">
					        {{slide.projectCaption}}
					      </div>
					      {% endif %}
					    </div>
					    
					    {% set count2 = count2+2 %}
					    {% endfor %}
					    {% endfor %}
					  </div>
					  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators-{{block.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="#carouselExampleIndicators-{{block.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</button>
					      </div>
					    </div>
					  </div>
					</div>                            
					                    
                    
                    
                {% endif %}
			</div>
        </div>
        </div>
        
        {% endfor %}

        
        
    </div>
    </div>
    </div>
    

               
</div>
</div>
</div>
{% endblock %}