<?php
/**
 * @package DJ-SlideshowTimeline
 * @copyright Copyright (C) 2017  DJ-Extensions.com LTD, All rights reserved.
 * @license http://www.gnu.org/licenses GNU/GPL
 * @author url: http://dj-extensions.com
 * @author email contact@dj-extensions.com
 *
 * DJ-SlideshowTimeline is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * DJ-SlideshowTimeline is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with DJ-SlideshowTimeline. If not, see <http://www.gnu.org/licenses/>.
 *
 */

defined('_JEXEC') or die;
?>

<?php

$props['connect'] = "js-{$this->uid()}";

$el = $this->el('div', [
    'class' => [
        'uk-timeline-container'
    ]
]);

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

    'class' => [
        'uk-child-width-expand',
        $props['switcher_grid_column_gap'] == $props['switcher_grid_row_gap'] ? 'uk-grid-{switcher_grid_column_gap}' : '[uk-grid-column-{switcher_grid_column_gap}] [uk-grid-row-{switcher_grid_row_gap}]',
        'uk-flex-middle {@switcher_vertical_align}',
    ],

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

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

    'class' => [
        'uk-width-{switcher_grid_width}@{switcher_grid_breakpoint}',
        'uk-flex-last@{switcher_grid_breakpoint} {@switcher_position: right}',
    ],

]);

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

?>

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

<?php if (in_array($props['switcher_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',
                    'uk-margin-remove-first-child' => !$child->props['image'] || !in_array($props['image_align'], ['left', 'right']),
                ],
                'data-year' => $child->props['title']

            ]);

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

        <?php endforeach ?>
        <?= $content->end() ?>

    </div>
    </div>

<?php else : ?>
    <div class="uk-position-relative uk-slider-timeline uk-visible-toggle uk-width-1-1 uk-hidden@l" uk-grid
         tabindex="-1"
    >
        <div class="uk-width-1-4">
            <a class="el-slidenav uk-icon uk-slidenav-previous uk-slidenav uk-margin-auto uk-timeline-prev" href="#">
                <span uk-icon="chevron-left"></span>
            </a>
        </div>
        <div class="uk-width-1-2 uk-padding-remove-left uk-timeline-container" uk-slider="center: true;finite: true;max-height:10"
             style="height: 100px;">
            <ul class="uk-slider-items uk-timeline-items uk-grid-match uk-width-1-1 uk-timeline-mobile-nav"
                uk-height-viewport="offset-top: true; offset-bottom: 30">
                <?php
                $index = 0;
                foreach ($children as $child) :
                    ?>
                    <li class="uk-padding-remove uk-text-center  uk-timeline-nav-width">
             <span class="lena-year-btn" data-year="<?= $child->props['title'] ?>" data-index="<?php echo $index ?>">
                    <hr class="uk-divider-icon uk-timeline-icon">
                    <span><?= $child->props['title'] ?></span>
             </span>
                    </li>
                    <?php $index++; ?>
                <?php endforeach ?>
            </ul>
        </div>
        <div class="uk-width-1-4">
            <a class="el-slidenav uk-icon uk-slidenav-next uk-slidenav uk-margin-auto uk-timeline-next" href="#">
                <span uk-icon="chevron-right"></span>
            </a>
        </div>
    </div>
    <?= $props['switcher_position'] == 'top' ? $this->render("{$__dir}/template-nav", compact('props')) : '' ?>

    <?= $content($props) ?>

    <?php foreach ($children as $child) :
        $content_item = $this->el('li', [

            'class' => [
                'el-item',
            ],
            'data-year' => $child->props['title']
        ]);

        ?>
        <?= $content_item($props) ?>

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

    <?= $content->end() ?>

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

<?php endif ?>

</div>
