{% set node_tit = node.title.0.value %}
{% set tit_class = node_tit|render|lower|replace({' ':'-'}) %}
<section id="dynamics" class="dynamics-area {{ tit_class }}">
  <div class="row">
    {# dynamics++ banner section #}
    <div class="banner inner-carousel">
      {% if node.field_banner.getvalue | length > 1 %}
        <div class="owl-carousel owl-theme banner-carousel">
          {% for item in node.field_banner %}
            <div class="banner-content">
	      {#{% set responsivebanimagestyle = {
                '#theme': 'responsive_image',
                '#responsive_image_style_id': 'dynamics_banner',
                '#uri': item.entity.field_image.0.entity.uri.value,
                '#attributes': { class: 'img-responsive blazy', alt: item.entity.field_image.alt, width: item.entity.field_image.0.width, height: item.entity.field_image.0.height },
              } %}
              {{ responsivebanimagestyle }}#}
	      {#{% set imagePath = item.entity.field_image.0.entity.uri.value %}
	      <picture>
	        <source media="(min-width:650px)" srcset="{{ imagePath|image_style('max_650x650') }}">
		<source media="(min-width:465px)" srcset="{{ imagePath|image_style('large') }}">
	        <source media="(min-width:1366px)" srcset="{{ imagePath|image_style('dynamics_banner') }}">
		<img src="{{ file_url(imagePath) }}" alt="" style="width:auto;">
	      </picture>#}

	      {#<img srcset="{{ imagePath|image_style('thumbnail') }} 300w, {{ imagePath|image_style('dynamics_banner') }} 800w" src="{{ file_url(imagePath) }}" alt="some graphic image" typeof="foaf:Image"/>#}
              <img src="{{ file_url(item.entity.field_image.0.entity.uri.value) }}" alt="{{ item.entity.field_image.alt }}" title="{{ item.entity.field_image.title }}" class="img-fluid blazy" width="{{ item.entity.field_image.width }}" height="{{ item.entity.field_image.height }}" />
              <div class="container">
                <div class="banner-text">
                  <h2>{{ item.entity.title.0.value }}</h2>
                  {{ item.entity.body.0.value|raw }}
                </div>
              </div>
            </div>
          {% endfor %}
        </div>
      {% else %}
        {% for item in node.field_banner %}
          <div class="banner-content">
	    {% set imagePath = item.entity.field_image.0.entity.uri.value %}	    
	    <img srcset="{{ imagePath|image_style('thumbnail') }} 300w, {{ imagePath|image_style('dynamics_banner') }} 800w" src="{{ file_url(imagePath) }}" alt="{{ item.entity.field_image.alt }}" title="{{ item.entity.field_image.title }}" typeof="foaf:Image"/>
            {#<img src="{{ file_url(item.entity.field_image.0.entity.uri.value) }}" class="img-fluid blazy" width="{{ item.entity.field_image.width }}" height="{{ item.entity.field_image.height }}" alt="{{ item.entity.field_image.alt }}" title="{{ item.entity.field_image.title }}" style="float: right;" />#}
            <div class="container">
              <div class="banner-text">
               {# <h2>{{ item.entity.title.0.value }}</h2> #}
                {{ item.entity.body.0.value|raw }}
              </div>
            </div>
          </div>
        {% endfor %}
      {% endif %}
    </div>


    {# write up section #}

    {% if node.field_azure_service_page == 1 %}
    
      {% for item in node.field_content %}

        {# this is used to print image and content #}
        {% if item.entity.field_content is not empty %}
          {% set extra_class = item.entity.field_paragraph_extra_class.value|raw %}
          <div id="image-cont" class="section-spacing row image-row img-content {{ extra_class }}">
            <div class="container-fluid flexrow">
              <div class="col-sm-6 left-cont">
                {{ item.entity.field_content.value|raw }}
              </div>
              <div class="col-sm-6 right-cont">
                <div class="float-value">
                  {{ item.entity.field_image_content.value|raw }}
                </div>
              </div>
            </div>
          </div>
        {% endif %}

        {# this is used to print background image with content #}
        {% if item.entity.field_bg_image_with_content is not empty %}
          {% set extra_class = item.entity.field_paragraph_extra_class.value|raw %}
          <div class="row bg-img-content {{ extra_class }}">
            <div class="container-fluid">
              <div class="col-sm-12">
                {{ item.entity.field_bg_image_with_content.value|raw }}
              </div>
            </div>
          </div>
        {% endif %}

        {# this is used to print image and content on either sides #}
        {% if item.entity.field_left_content is not empty %}
          {% set extra_class = item.entity.field_paragraph_extra_class.value|raw %}
          <div class="section-spacing row both-side-content {{ extra_class }}">
            <div class="container-fluid">
              <div class="col-sm-6">
                {{ item.entity.field_left_content.value|raw }}
              </div>
              <div class="col-sm-6">
                {{ item.entity.field_right_content.value|raw }}
              </div>
            </div>
          </div>
        {% endif %}
    
        {# this is used to print both side content #}
        {% if item.entity.field_full_row_content is not empty %}
          {% set extra_class = item.entity.field_paragraph_extra_class.value|raw %}
          <div class="section-spacing row full-row-content {{ extra_class }}">
            <div class="container-fluid">
              <div class="col-sm-12">
                {{ item.entity.field_full_row_content.value|raw }}
              </div>
            </div>
          </div>
        {% endif %}

      {% endfor %}

      {# case study section #}
      <div id="case-study">
        <div class="azure-casestudy" id="azure-cs-id">
          <div class="azure-cs-content retail-cs-carousel" id="success-stories">
            <h3 class="section-title">Success Stories</h3>
            {% if node.field_resource_case_study is not empty %}
              {% if node.field_resource_case_study.getvalue | length > 1 %}
                <div class="owl-carousel owl-theme cs-carousel">
                  {% for i, item in node.field_resource_case_study %}
                    <div class="item">
                      <div class="cs-image">
                        <img src="{{ file_url(item.entity.field_banner.0.entity.uri.value) }}" class="img-fluid" width="1366" height="550" alt="{{ item.entity.field_banner.alt }}">
                      </div>
 
                      <div class="cs-img-content">
                        <div class="azure-cs-content">
                          <h3 class="h2">{{ item.entity.title.0.value }}</h3>
                          <p>{{ item.entity.body.summary }}</p>
                          <a href="{{ path('entity.node.canonical', {'node': node.field_resource_case_study[i].entity.id}) }}" class="know-more-btn">Know more</a>
                          {#<a href="{{ item.entity.field_links.0.url }}" class="know-more-btn" target="_blank">Know more</a>#}
                        </div>
                      </div>          
                    </div>
                  {% endfor %}
                </div>
              {% else %}
                {% for item in node.field_resource_case_study %}
                  <div class="azure-sec-content">
                    <div class="azure-cs">
	              {% set responsiveimagestyle = {
                        '#theme': 'responsive_image',
                        '#responsive_image_style_id': 'azure_case_studies',
                        '#uri': item.entity.field_banner.0.entity.uri.value,
                        '#alt': item.entity.field_banner.alt,
                        '#width': item.entity.field_banner.0.width,
                        '#height': item.entity.field_banner.0.height,
                        '#attributes': { class: 'img-responsive' },
                        }
                      %}
                      {{ responsiveimagestyle }}
                      {#<img src="{{ file_url(item.entity.field_image.0.entity.uri.value) }}" width="619" height="609">#}
                    </div>

                    <div class="azure-cs-content">
                      <h3 class="h2">{{item.entity.title.0.value}}</h3>
                      <p>{{ item.entity.body.summary }}</p>
                      <a href="{{ path('entity.node.canonical', {'node': node.field_resource_case_study.entity.id}) }}" class="know-more-btn">Know more</a>
                      {#<a href="{{ item.entity.field_links.0.url }}" class="know-more-btn" target="_blank">Know more</a>#}
                    </div>
                  </div>
	        {% endfor %}
              {% endif %}

              {% elseif node.field_new_case_study is not empty %}
                {% if node.field_new_case_study.getvalue | length > 1 %}
                  <div class="owl-carousel owl-theme cs-carousel">
                    {% for i, item in node.field_new_case_study %}
                      {% for items in item.entity.field_banner %}
                        <div class="item">
                          <div class="cs-image">
                            <img src="{{ file_url(items.entity.field_banner.0.entity.uri.value) }}" class="img-fluid" width="{{ items.entity.field_banner.0.width }}" height="{{ items.entity.field_banner.0.height }}" alt="{{ items.entity.field_banner.alt }}">
                          </div>
 
                          <div class="cs-img-content">
                            <div class="azure-cs-content">
                              <h3 class="h2">{{ item.entity.title.0.value }}</h3>
                              <p>{{ item.entity.body.summary }}</p>
                              <a href="{{ path('entity.node.canonical', {'node': node.field_new_case_study[i].entity.id}) }}" class="know-more-btn">Know more</a>
                            </div>
                          </div>
                        </div>
                      {% endfor %}
                    {% endfor %}
                  </div>
                {% else %}
                  {% for item in node.field_new_case_study %}
                    {% for items in item.entity.field_banner %}
                      <div class="azure-sec-content">
                        <div class="azure-cs">
                          {% set responsiveimagestyle = {
                             '#theme': 'responsive_image',
                             '#responsive_image_style_id': 'azure_case_studies',
                             '#uri': items.entity.field_banner.0.entity.uri.value,
                             '#alt': items.entity.field_banner.alt,
                             '#width': items.entity.field_banner.0.width,
                             '#height': items.entity.field_banner.0.height,
                             '#attributes': { class: 'img-responsive' },
                            }
                          %}
                          {{ responsiveimagestyle }}
                          {#<img src="{{ file_url(item.entity.field_banner.0.entity.uri.value) }}" width="619" height="609">#}
                        </div>

                        <div class="azure-cs-content">
                          <h3 class="h2">{{item.entity.title.0.value}}</h3>
                          <p>{{ item.entity.body.summary }}</p>
                          <a href="{{ path('entity.node.canonical', {'node': node.field_new_case_study.entity.id}) }}" class="know-more-btn">Know more</a>
                        </div>
                      </div>
                    {% endfor %}
                  {% endfor %}
                {% endif %}
              {% endif %}
            </div>
          </div>
        </div>

    {% else %}

    <div class="content-wrapper" id="writeup">
      <div class="page-nav">
        {{ drupal_entity('block', 'dynamicspagenavigation', check_access=false) }}
      </div>
      
      <div class="center-stage">
        {{ node.body.0.value|raw }}
      </div>
    </div>

    <div class="content-wrapper" id="overview">
      {{ node.field_overview.0.value|raw }}
    </div>

    {# Dynamics++ offerings section #}
    <div class="content-wrapper" id="offerings">
      <div class="row offerings-title">
	<h2>World Class Service Offerings for Dynamics</h2>
        <p class="offerings-subpara">Sonata’s offerings across the Finance & Operations, Customer Engagement and <a href="/platformation-services/ms-dynamics/power-platform">Power Platform</a> stack</p>
	{{ drupal_entity('block', 'quicktabsdynamicsofferings', check_access=false) }}
      </div>
    </div>

    <div class="content-wrapper other-content" id="others">
      {{ node.field_other_content.0.value|raw }}
    </div>

    <div class="ind-seg-content" id="industry-segments">
      <div class="container-fluid">
        <h3 class="heading-relatedpost">Industries and Segments</h3> 
        <div class="owl-carousel owl-theme cs-carousel">
          {% for j, items in node.field_industry_segments %}
	    <div class="item">
	      <div class="image-content">
	        {#<h3>{{ items.entity.title.0.value }}</h3>#}
                <h3>{{ items.entity.field_image.title }}</h3>
	        <p>{{ items.entity.field_dyn_segment_description.0.value }}</p>
	        <a href="{{ path('entity.node.canonical', {'node': node.field_industry_segments[j].entity.id}) }}" class="know-more-btn">Know more</a>
	      </div>
	      <div class="ind-seg-image">
		{% set responsiveimagestyle = {
                    '#theme': 'responsive_image',
                    '#responsive_image_style_id': 'dynamics_industry_segments',
                    '#uri': items.entity.field_image.0.entity.uri.value,
                    '#alt': items.entity.field_image.alt,
                    '#width': items.entity.field_image.0.width,
                    '#height': items.entity.field_image.0.height,
                    '#attributes': { class: 'img-fluid' },
                  } %}
                  {{ responsiveimagestyle }}

	        {#<img src="{{ file_url(items.entity.field_thumbnail_image.0.entity.uri.value) }}" class="img-fluid" width="508" height="531">#}
	      </div>
	    </div>
	  {% endfor %}
	</div>
      </div>
    </div>

    <div class="why-sonata" id="strengths">
      {{ node.field_why_sonata_.0.value|raw }}
      <div class="dyn-video-content">
        <video oncontextmenu="return false;" width="1366" height="490" autoplay loop muted>
          <source src="/themes/custom/dynamics/sonata-advantage.mp4" type="video/mp4">
          <source src="/themes/custom/dynamics/sonata-advantage.ogg" type="video/ogg">
          Your browser does not support the video tag.
        </video>
      </div>
    </div>

    {# case study section #}
    <div class="dynamics-casestudy" id="dynamics-cs-id">
      {#{{ drupal_view('resource_section', 'block_1') }}#}
      <div class="dynamics-cs-content retail-cs-carousel">
	<h2 class="section-title">Success Stories</h2>
        {% if node.field_resource_case_study.getvalue | length > 1 %}
          <div class="owl-carousel owl-theme cs-carousel">
            {% for i, item in node.field_resource_case_study %}
	      <div class="item">	
                <div class="cs-img-content">
		  <div class="dynamics-cs-content">
                    <h3>{{ item.entity.title.0.value }}</h3>
                    <p>{{ item.entity.body.summary }}</p>
                    <a href="{{ path('entity.node.canonical', {'node': node.field_resource_case_study[i].entity.id}) }}" class="know-more-btn">Know more</a>
                  </div>
	        </div>
	        <div class="cs-image">
                  {#{% set responsiveimagestyle = {
                    '#theme': 'responsive_image',
                    '#responsive_image_style_id': 'dynamics_cs_section',
                    '#uri': item.entity.field_image.0.entity.uri.value,
                    '#alt': item.entity.field_image.alt,
                    '#width': item.entity.field_image.0.width,
                    '#height': item.entity.field_image.0.height,
                    '#attributes': { class: 'img-responsive' },
                  } %}
                  {{ responsiveimagestyle }}#}
                  <img src="{{ file_url(item.entity.field_image.0.entity.uri.value) }}" class="img-fluid" width="619" height="609" alt="{{ item.entity.field_image.alt }}">
                </div>
	      </div>
            {% endfor %}
          </div>
        {% else %}
	  {% for item in node.field_resource_case_study %}
            <div class="dynamics-cs-content">
	      <div class="col-sm-6">
                <div class="dynamics-cs-content">
                  <h3>{{item.entity.title.0.value}}</h3>
                  <a href="{{ path('entity.node.canonical', {'node': node.field_resource_case_study.entity.id}) }}" class="know-more-btn">Know more</a>
                </div>
              </div>
	
	      <div class="col-sm-6">	
                {% set responsiveimagestyle = {
                  '#theme': 'responsive_image',
                  '#responsive_image_style_id': 'dynamics_cs_section',
                  '#uri': item.entity.field_image.0.entity.uri.value,
                  '#alt': item.entity.field_image.alt,
                  '#width': item.entity.field_image.0.width,
                  '#height': item.entity.field_image.0.height,
                  '#attributes': { class: 'img-responsive' },
                } %}
                {{ responsiveimagestyle }}
                {#<img src="{{ file_url(item.entity.field_image.0.entity.uri.value) }}" width="619" height="609">#}
	      </div>	
            </div>
          {% endfor %}
        {% endif %}
      </div>
    </div>

    {# customer speak section #}
    {% if node.field_display_customer_speak.0.value == '1' %}
      {# customer speak #}
      <div class="content-wrapper" id="customer-speak">
        <div class="container-fluid">
          <div class="row">
	    <h3>Customer Speak</h3>
            <div class="owl-carousel owl-theme customer-carousel">
              {% for items in node.field_customer_speak %}
                <div class="item">
                  <div class="customer-testi">
                    {{ items.entity.body.0.value|raw }} 
                  </div>
		  <div class="cs-image">
		    <img src="{{ file_url(items.entity.field_thumbnail_image.0.entity.uri.value) }}" class="img-fluid" width="385" height="333">
		  </div>
                </div>
              {% endfor %}
            </div>
          </div>
        </div>
      </div>
    {% endif %}
    {% endif %}

    {# resource section #}
    <div class="content-wrapper" id="resources">
      <div class="container-fluid">
        <div class="row">
          <h2 class="section-title">resources</h2>
          {{ node.field_resources_section.0.value|raw }}
        </div>
      </div>
    </div>

  </div>
</section>