<?php
/* @var \Tangibledesign\MyHome\Widgets\General\AccordionWidget $mhCurrentWidget */
global $mhCurrentWidget;
?>
<div class="myhome-app">
    <mh-new-accordion
            class="myhome-accordions"
        <?php if ($mhCurrentWidget->openFirst()) : ?>
            initial-open="0"
        <?php endif; ?>
    >
        <div class="myhome-accordions" slot-scope="props">
            <?php foreach ($mhCurrentWidget->getItems() as $mhIndex => $mhItem) : ?>
                <div
                        class="myhome-accordions__item myhome-accordion"
                        :class="{'myhome-accordion--open': props.open === '<?php echo esc_attr($mhIndex); ?>'}"
                >
                    <div
                            class="myhome-accordion__head"
                            @click.prevent="props.onOpen('<?php echo esc_attr($mhIndex); ?>')"
                    >
                        <h3 class="myhome-accordion__label">
                            <?php echo esc_html($mhItem['label']); ?>
                        </h3>

                        <div class="myhome-accordion__arrow">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                                <!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
                                <path d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"/>
                            </svg>
                        </div>
                    </div>

                    <div 
                        class="myhome-accordion__text myhome-accordion__text--<?php echo esc_attr($mhIndex); ?>"
                        v-show="props.open === '<?php echo esc_attr($mhIndex); ?>'"
                    >
                        <?php echo wp_kses_post($mhItem['text']); ?>
                    </div>
                </div>
            <?php endforeach; ?>
        </div>
    </mh-new-accordion>
</div>
