<?php
/**
 * @package DJ-Extensions-DJSectionsTab
 * @copyright Copyright (C) DJ-Extensions.com, All rights reserved.
 * @license http://www.gnu.org/licenses GNU/GPL
 * @author url: http://dj-extensions.com
 * @author email contact@m.herzberg
 */
defined('_JEXEC') or die;
$props['connect'] = "js-{$this->uid()}";
$props['item_nav'] = "js-{$this->uid()}";

$el = $this->el('div');

// Nav Alignment
$grid = $this->el('div', [

    'class' => [
        'uk-child-width-expand',
        'uk-flex-middle {@nav_vertical_align}',
    ],

    'uk-grid' => true,
]);

$cell = $this->el('div', [

    'class' => [
        'uk-width-{nav_grid_width}@{nav_grid_breakpoint}',
        'uk-flex-last@{nav_grid_breakpoint} {@nav_position: right}',
    ],

]);

// Content
$content = $this->el('ul', [
    'id' => ['{connect}'],
    'class' => 'uk-switcher',
    'uk-height-match' => ['row: false {@switcher_height}'],
]);

?>

<?= $el($props, $attrs) ?>

    <?php if ($props['nav'] && in_array($props['nav_position'], ['left', 'right'])) : ?>

        <?= $grid($props) ?>
            <?= $cell($props, $this->render("{$__dir}/template-nav", compact('props'))) ?>
            <div>

                <?= $content($props) ?>
                    <?php foreach ($children as $child) :

                        $content_item = $this->el('li', [

                            'class' => [
                                'el-item',
                            ],

                        ]);

                    ?>
                    <?= $content_item($props) ?>
                        <?= $builder->render($child, ['element' => $props]) ?>
                    <?= $content_item->end() ?>
                    
                    <?php endforeach ?>
                <?= $content->end() ?>

            </div>
        </div>

    <?php else : ?>

        <?php if ($props['nav_position'] == 'top') : ?>
        <?= $this->render("{$__dir}/template-nav", compact('props')) ?>
        <?php endif ?>

        <?= $content($props) ?>

            <?php foreach ($children as $child) :

                $content_item = $this->el('li', [

                    'class' => [
                        'el-item',
                    ],

                ]);

            ?>
            <?= $content_item($props) ?>
                <?= $builder->render($child, ['element' => $props]) ?>
            <?= $content_item->end() ?>
            <?php endforeach ?>
            
        <?= $content->end() ?>

        <?php if ($props['nav_position'] == 'bottom') : ?>
        <?= $this->render("{$__dir}/template-nav", compact('props')) ?>
        <?php endif ?>

    <?php endif ?>

</div>
