<?php
//print_r($attributes);
extract($attributes);

Flo_Guten_Blocks_Helper::load_google_fonts(array($titleTypography, $linkTypography, $questionTypography, $answerTypography));
?>

<div class="<?php echo $className;?> flo-block <?php echo Flo_Guten_Blocks_Helper::get_additional_class($attributes);?> flo-block-faq1" style="
    --top-margin: <?php echo $topMargin?>px;
    --bottom-margin: <?php echo $bottomMargin?>px;
    --mobile-top-margin: <?php echo $mobileTopMargin?>px;
    --mobile-bottom-margin: <?php echo $mobileBottomMargin?>px;
    --title-color: <?php echo Flo_Guten_Blocks_Helper::get_style_color($titleColor)?>; 
    <?php echo Flo_Guten_Blocks_Helper::get_style_for_typography('title', $titleTypography)?>
    --link-color: <?php echo Flo_Guten_Blocks_Helper::get_style_color($linkColor)?>; 
    <?php echo Flo_Guten_Blocks_Helper::get_style_for_typography('link', $linkTypography)?>
    --question-color: <?php echo Flo_Guten_Blocks_Helper::get_style_color($questionColor)?>; 
    <?php echo Flo_Guten_Blocks_Helper::get_style_for_typography('question', $questionTypography)?>
    --answer-color: <?php echo Flo_Guten_Blocks_Helper::get_style_color($answerColor)?>; 
    <?php echo Flo_Guten_Blocks_Helper::get_style_for_typography('answer', $answerTypography)?>
    --line-color: <?php echo Flo_Guten_Blocks_Helper::get_style_color($lineColor)?>; 
    --arrow-color: <?php echo Flo_Guten_Blocks_Helper::get_style_color($arrowColor)?>;     
    "
    <?php echo !empty($anchor) ? 'id="'.$anchor.'"' : '';?>
>
    <div class="flo-block-faq1__header">
        <div
            class="flo-block-faq1__title"
            data-font="<?php echo Flo_Guten_Blocks_Helper::getDataFontForTypography($titleTypography);?>"
        >
            <?php echo $title;?>
        </div>
        <a
            class="flo-block-faq1__link"
            href="<?php echo $linkUrl;?>"
        >
            <span data-font="<?php echo Flo_Guten_Blocks_Helper::getDataFontForTypography($linkTypography);?>"><?php echo $linkLabel;?></span>
        </a>
    </div>
    <div class="flo-block-faq1__items">
        <?php foreach ($list as $item):?>
            <div class="flo-block-faq1__item">
                <div
                    class="flo-block-faq1__question"
                    data-font="<?php echo Flo_Guten_Blocks_Helper::getDataFontForTypography($questionTypography);?>"
                >
                    <?php echo $item['question'];?>
                </div>
                <div
                    class="flo-block-faq1__answer"
                    data-font="<?php echo Flo_Guten_Blocks_Helper::getDataFontForTypography($answerTypography);?>"
                >
                    <?php echo $item['answer'];?>
                </div>
            </div>
        <?php endforeach;?>
    </div>
</div>