{% set dateColumn = 'col-3 text-center' %}
{% set alkalinityColumn = 'col-2 text-center' %}
{% set pHColumn = 'col-2 text-center' %}
{% set chlorineColumn = 'col-2 text-center' %}
{% set takenByColumn = 'col-3 text-center' %}
<div class="row justify-content-center">
    <div class="col-12 col-md-6 text-center">
        <h3>Chemistry Record History</h3>
        {% if secondaryRecords|length > 0 %}
            <hr>
            <h4>Primary</h4>
        {% endif %}
        <div class="row justify-content-center">
            <div class="{{ dateColumn }}">DATE</div>
            <div class="{{ alkalinityColumn }}">ALK</div>
            <div class="{{ pHColumn }}">pH</div>
            <div class="{{ chlorineColumn }}">CHL</div>
            <div class="{{ takenByColumn }}">TAKEN BY</div>
        </div>
        <div class="stripeRows">
            {% for record in chemistryRecords %}
                {# @var record \App\Entity\ChemistryRecord #}
                <div class="row justify-content-center">
                    <div class="{{ dateColumn }}">{{ record.date|date('m/d/Y') }}</div>
                    <div class="{{ alkalinityColumn }}">{{ record.totalAlkalinity }}</div>
                    <div class="{{ pHColumn }}">{{ record.pH }}</div>
                    <div class="{{ chlorineColumn }}">{{ record.chlorine }}</div>
                    <div class="{{ takenByColumn }}">{{ record.isTakenByTech == 1 ? 'Tech':'Client' }}</div>
                </div>
            {% endfor %}
        </div>
        {% if secondaryRecords|length > 0 %}
            <hr>
            <h4>Secondary</h4>
            <div class="row justify-content-center">
                <div class="{{ dateColumn }}">DATE</div>
                <div class="{{ alkalinityColumn }}">ALK</div>
                <div class="{{ pHColumn }}">pH</div>
                <div class="{{ chlorineColumn }}">CHL</div>
                <div class="{{ takenByColumn }}">TAKEN BY</div>
            </div>
            <div class="stripeRows">
                {% for record in secondaryRecords %}
                    {# @var record \App\Entity\SecondaryChemistryRecord #}
                    <div class="row justify-content-center">
                        <div class="{{ dateColumn }}">{{ record.date|date('m/d/Y') }}</div>
                        <div class="{{ alkalinityColumn }}">{{ record.totalAlkalinity }}</div>
                        <div class="{{ pHColumn }}">{{ record.pH }}</div>
                        <div class="{{ chlorineColumn }}">{{ record.chlorine }}</div>
                        <div class="{{ takenByColumn }}">{{ record.isTakenByTech == 1 ? 'Tech':'Client' }}</div>
                    </div>
                {% endfor %}
            </div>
        {% endif %}
    </div>
</div>