<?php 
/* 
* Block Name: Technologies
* Post Type: page, post
*/
?>
<?php if (isset($block['data']['previewImage'])): ?>
    <?php do_action('block_image', __FILE__); ?>
<?php else: ?>
    <?php

    // Block helper
    require \get_template_directory() . '/template-parts/base/block-helper.php';
    if (isset($disable) && $disable) {
        return;
    }

	// Load values and assing defaults
	$categories = get_field('categories') ?: false;
?>
	<section class="section technologies-section block <?php echo $className; ?>" 
        <?php if ($bgUrl): ?>
            style="background-image: url('<?php echo $bgUrl; ?>');"
            data-desktop-image="<?php echo $bgUrl; ?>"
        <?php endif; ?>
        <?php if ($mobileBgUrl): ?>
            data-mobile-image="<?php echo $mobileBgUrl; ?>"
        <?php endif; ?>
        <?php if ($sectionId): ?>
            id="<?php echo $sectionId; ?>"
        <?php endif; ?>
    >
		<div class="container">
			<?php if ($title): ?>
				<h2 class="text-center"><?php echo $title; ?></h2>
			<?php endif; ?>
			<?php if ($text): ?>
				<div class="text"><?php echo $text; ?></div>
			<?php endif; ?>
			<div class="technologies-content mt-5">
				<?php if (is_array($categories) && count($categories)): ?>
					<div class="row">
						<div class="col-sm-8 offset-sm-2">
							<div class="technologies-tab">
								<ul class="nav nav-tabs justify-content-center">
									<?php foreach ($categories as $key => $category): ?>
										<?php if (array_key_exists('label', $category) && $label = $category['label']): ?>
											<li class="nav-item">
												<span class="nav-link <?php echo $key ?: 'active'; ?>" href=".tab-<?php echo $key; ?>"><?php echo $label ?></a>
											</li>
										<?php endif; ?>
									<?php endforeach; ?>
								</ul>
								<div class="tab-content">
									<?php foreach ($categories as $key => $category): ?>
										<?php if (array_key_exists('technologies', $category) && $technologies = $category['technologies']): ?>
											<div class="tab-pane fade <?php echo $key ?: 'show active'; ?> tab-<?php echo $key; ?>">
												<div class="row justify-content-center">
													<?php foreach ($technologies as $key => $technology): ?>
														<?php if (array_key_exists('name', $technology)): ?>
															<div class="col-xl-2 col-sm-3 col-4 technology">
																<?php if (array_key_exists('link', $technology) && $link = $technology['link']): ?>
																	<a href="<?php echo $link['url']; ?>" target="<?php echo $link['target']; ?>" aria-label="<?php echo $technology['name']; ?>" rel="noreferrer nofollow">
																<?php endif; ?>
																	<?php if (array_key_exists('icon', $technology) && $iconId = $technology['icon']) {
																		$path = wp_get_original_image_path($iconId);
																		if (strtolower(pathinfo($path, PATHINFO_EXTENSION)) == "svg") {
																			include($path);
																		} else {
																			echo wp_get_attachment_image($iconId, 'thumbnail', false, ['class' => 'technology-icon']);
																		}
																	} ?>
																	<div class="name"><?php echo $technology['name']; ?></div>
																<?php echo $link ? '</a>' : ''; ?>
															</div>
														<?php endif; ?>
													<?php endforeach; ?>
												</div>
											</div>
										<?php endif; ?>
									<?php endforeach; ?>
								</div>
							</div>
						</div>
					</div>
				<?php endif; ?>
			</div>
		</div>
	</section>
<?php endif; ?>

