<?php
defined('ABSPATH') || exit;
$show_mobile_bottom_nav = dej_options('show_mobile_bottom_nav');
$show_mobile_nav_counter = dej_options('show_mobile_bottom_nav_counter');
$icons = dej_options('dej_mob_bottom_nav_icons');
$col_count = count($icons);
$counter = 1;
$active_li = intval($col_count/2) + 1;
?>
<?php if ($show_mobile_bottom_nav and $icons) { ?>
    <ul class="mobile_bottom_nav d_grid <?php echo 'col' . $col_count . ' ';  echo dej_options('dej_bg_mob_bottom_nav', 'blur_bg'); ?>">
        <?php foreach ($icons as $icon) { ?>
        <li class="mobile-list <?php if ($counter === $active_li) { echo 'active '; } echo 'icon'. $counter; ?>">
            <?php if ($icon['show_custom_icon']) {
               $c_icon =  $icon['custom_icon']; $c_link =  $icon['custom_link']; ?>
                <a target="<?= $c_link['target'] ?>" href="<?= $c_link['url'] ?>"><i class="<?= $c_icon ?>"></i></a>
            <?php } elseif($icon['icon']) { dejavo_mobile_nav_select_icon($icon['icon']); }  ?>
            <span class="title"><?= $icon['title'] ?></span>
        </li>
        <?php $counter++; } ?>

    </ul>
<?php } ?>
<style>
    <?php $counter2 = 1; foreach ($icons as $icon) {
        if ($icon['active_bg']) { ?>
    .mobile_bottom_nav <?= 'li.active.icon' . $counter2 ?>  { background: <?= $icon['active_bg'] ?> !important; }
    <?php } if ($icon['color']) { ?>
    .mobile_bottom_nav <?= 'li.icon' . $counter2 ?> a i { color: <?= $icon['color'] ?> !important; }
    <?php } $counter2++;  } ?>
</style>