<?php
/**
 * Server render for audace/expertise-showcase.
 *
 * @var array    $attributes
 * @var string   $content
 * @var WP_Block $block
 */

if ( ! defined( 'ABSPATH' ) ) {
    exit;
}

$heading       = isset( $attributes['heading'] )         ? (string) $attributes['heading']     : 'expertise';
$count_suffix  = isset( $attributes['countSuffix'] )     ? (string) $attributes['countSuffix'] : "sujets d'intervention";
$left_width    = isset( $attributes['leftColumnWidth'] ) ? (string) $attributes['leftColumnWidth'] : '40%';
$column_gap    = isset( $attributes['columnGap'] )       ? (string) $attributes['columnGap']   : '2rem';
$max_items     = isset( $attributes['maxItems'] )        ? (int) $attributes['maxItems']       : 0;
$loop_arrows   = ! empty( $attributes['loopArrows'] );
$panel_padding = isset( $attributes['panelPadding'] )    ? (string) $attributes['panelPadding'] : '0px';
$panel_gap     = isset( $attributes['panelGap'] )        ? (string) $attributes['panelGap']     : '1.5rem';

$query = new WP_Query( array(
    'post_type'              => 'expertise',
    'posts_per_page'         => $max_items > 0 ? $max_items : -1,
    'orderby'                => array( 'menu_order' => 'ASC', 'date' => 'ASC' ),
    'no_found_rows'          => true,
    'update_post_term_cache' => false,
    'ignore_sticky_posts'    => true,
) );

if ( ! $query->have_posts() ) {
    if ( current_user_can( 'edit_posts' ) ) {
        $wrapper = get_block_wrapper_attributes( array( 'class' => 'audace-expertise-showcase is-empty' ) );
        echo '<section ' . $wrapper . '><p>' . esc_html__( 'Aucune expertise publiée.', 'audace' ) . '</p></section>';
    }
    return;
}

$posts = $query->posts;
$count = count( $posts );

$style  = sprintf(
    '--audace-expertise-left: %s; --audace-expertise-gap: %s; --audace-expertise-panel-padding: %s; --audace-expertise-panel-gap: %s;',
    esc_attr( $left_width ),
    esc_attr( $column_gap ),
    esc_attr( $panel_padding ),
    esc_attr( $panel_gap )
);

$wrapper = get_block_wrapper_attributes( array(
    'class'           => 'audace-expertise-showcase',
    'style'           => $style,
    'data-loop'       => $loop_arrows ? '1' : '0',
    'data-active'     => '0',
) );

?>
<section <?php echo $wrapper; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>>
    <div class="audace-expertise-showcase__left">
        <h2 class="audace-expertise-showcase__heading"><?php echo esc_html( $heading ); ?></h2>
        <p class="audace-expertise-showcase__count">
            <span class="audace-expertise-showcase__count-label"><?php echo (int) $count; ?> <?php echo esc_html( $count_suffix ); ?></span>
        </p>
        <ul class="audace-expertise-tabs" role="tablist">
            <?php foreach ( $posts as $i => $p ) : ?>
                <li role="presentation">
                    <button
                        type="button"
                        role="tab"
                        class="audace-expertise-tab<?php echo 0 === $i ? ' is-active' : ''; ?>"
                        data-target="<?php echo (int) $i; ?>"
                        aria-selected="<?php echo 0 === $i ? 'true' : 'false'; ?>"
                        aria-controls="audace-expertise-panel-<?php echo esc_attr( $p->ID ); ?>"
                        id="audace-expertise-tab-<?php echo esc_attr( $p->ID ); ?>"
                    ><?php echo esc_html( get_the_title( $p ) ); ?></button>
                </li>
            <?php endforeach; ?>
        </ul>
    </div>

    <div class="audace-expertise-showcase__right">
        <div class="audace-expertise-stage">
            <?php foreach ( $posts as $i => $p ) :
                $thumb = get_the_post_thumbnail( $p, 'large', array( 'class' => 'audace-expertise-panel__thumb' ) );
                $body  = apply_filters( 'the_content', $p->post_content );
            ?>
                <article
                    class="audace-expertise-panel<?php echo 0 === $i ? ' is-active' : ''; ?>"
                    data-index="<?php echo (int) $i; ?>"
                    role="tabpanel"
                    id="audace-expertise-panel-<?php echo esc_attr( $p->ID ); ?>"
                    aria-labelledby="audace-expertise-tab-<?php echo esc_attr( $p->ID ); ?>"
                    <?php echo 0 === $i ? '' : 'aria-hidden="true"'; ?>
                >
                    <?php if ( $thumb ) : ?>
                        <figure class="audace-expertise-panel__figure"><?php echo $thumb; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?></figure>
                    <?php endif; ?>
                    <div class="audace-expertise-panel__content">
                        <?php echo $body; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
                    </div>
                </article>
            <?php endforeach; ?>
        </div>
        <nav class="audace-expertise-arrows" aria-label="<?php echo esc_attr__( 'Navigation entre expertises', 'audace' ); ?>">
            <button type="button" class="audace-expertise-arrow audace-expertise-arrow--prev" aria-label="<?php echo esc_attr__( 'Précédent', 'audace' ); ?>">
                <img src="<?php echo esc_url( get_theme_file_uri( 'assets/images/audace-fleche-gauche.svg' ) ); ?>" alt="" aria-hidden="true" />
            </button>
            <button type="button" class="audace-expertise-arrow audace-expertise-arrow--next" aria-label="<?php echo esc_attr__( 'Suivant', 'audace' ); ?>">
                <img src="<?php echo esc_url( get_theme_file_uri( 'assets/images/audace-fleche-droite.svg' ) ); ?>" alt="" aria-hidden="true" />
            </button>
        </nav>
    </div>
</section>
<?php
wp_reset_postdata();
