{% include 'quarks/_loadCssComponent' with {
    name: '_' ~ component.type
  } only %}
<section {{ dataComponent }} id="{{id}}" class="ImageAndAccordion bg-{{ index.index0 }} {{ separation }}">
	<div class="container">
        <div class="row justify-content-center">
            <div class="col-md-10">
                <h2 class="text-center py-3">{{component.blockTitle}}</h2>
            </div>
        </div>
        <div class="row py-4">
            <div class="col-md-6">
                <section class="contentStycky">
                        {% set image = component.image.one %}
                        {% include 'components/_imageTransformsSimple' with {
                          img: image,
                          setClass: 'img-absolute',
                          alt: image.title,
                          transforms: {
                            '(min-width: 1197px)': {
                              width: 750
                            },
                            '(min-width: 1196px)': {
                              width: 500,
                              height: 1300
                            },
                            '(min-width: 695px)': {
                              width: 710
                            }
                          },
                          default: {
                            width: 560
                          }
                        } only %}
                   
                </section>
            </div>
            <div class="col-md-6">
                <h3 class="ImageAndAccordion__subtitle mb-0 py-3">{{component.subtitle}}</h3>
                <div class="ImageAndAccordion__description" class="py-4">
                    {{component.description}}
                </div>
                {% if component.collapseTab is not empty %}
                <div class="ImageAndAccordion__accordion accordion py-3" id="accordion-{{component.id}}">
                    {% for el in component.collapseTab.all %}
                    <div class="accordion-item py-2" data-id="{{loop.index0}}">
                      <h4 class="accordion-header" id="heading-{{el.id}}">
                        <button class="accordion-button {{loop.index0 != 0 ? 'collapsed' }}" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-{{el.id}}" {% if loop.index0 == 0 %} aria-expanded="true" {% else %} aria-expanded="false" {% endif %} aria-controls="collapse-{{el.id}}">
                          {{el.blocktitle}}
                        </button>
                      </h4>
                      <div id="collapse-{{el.id}}" class="accordion-collapse collapse {{loop.index0 == 0 ? 'show'}}" aria-labelledby="heading-{{el.id}}" data-bs-parent="#accordion-{{component.id}}">
                        <div class="accordion-body px-2">
                            {% if el.table is not empty %}
                            {% set table = el.table[0] %}
                            <table class="table ImageAndAccordion__table ">
                                <thead>
                                  <tr>
                                    <th scope="col"><P class="mb-0">{{'Valor del contrato'|t}}</P></th>
                                    <th scope="col"><P class="mb-0">{{'Requerimientos'|t}}</P></th>
                                    <th scope="col"><p class="mb-0">{{'Método de evaluación'|t}}</p></th>
                                  </tr>
                                </thead>
                                <tbody>
                                  <tr>
                                    <td scope="row">{{table.valorDelContrato}}</td>
                                    <td>{{table.requerimientos}}</td>
                                    <td>{{table.metodoDeEvaluacion}}</td>
                                  </tr>
                                </tbody>
                              </table>
                              {% endif %}
                        </div>
                      </div>
                    </div>
                    {% endfor %}
                </div>
                {% endif %}
        </div>
    </div>
</section>