<?php
    defined('BASEPATH') OR exit('No direct script access allowed');

    use Coduo\PHPHumanizer\DateTimeHumanizer;

?>
<section class="p-0">
    <div id="main-slider" class="carousel slide" data-ride="carousel" type="background">
        <!-- Indicators -->
        <ol class="carousel-indicators">
            <li data-target="#main-slider" data-slide-to="0" class="active"></li>
            <li data-target="#main-slider" data-slide-to="1" class=""></li>
            <li data-target="#main-slider" data-slide-to="2" class=""></li>
            <li data-target="#main-slider" data-slide-to="3" class=""></li>
        </ol>

        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
            <div class="carousel-item active"
                 style="background-image: url(<?= base_url('f/449633b8fead67e16389c9f248e699db') ?>)">
                <div class="carousel-caption">
                    <div class="container">
                        <div class="row">
                            <div class="col-sm-12">
                                <div class="carousel-content centered">
                                    <h2 class="boxed animation animated-item-1 d-none d-md-block">
                                        <?= lang('home_slider_portfolio_title'); ?>
                                    </h2>
                                    <p class="boxed animation animated-item-1 d-block d-md-none">
                                        <?= lang('home_slider_portfolio_title'); ?>
                                    </p>
                                    <p class="boxed animation animated-item-2 d-none d-md-block">
                                        <?= lang('home_slider_portfolio_des'); ?>
                                    </p>
                                    <br>
                                    <a class="boxed btn btn-md animation animated-item-4"
                                       href="<?= base_url('portfolio') ?>">
                                        <?= lang('home_slider_portfolio_btn') ?>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="carousel-item" style="background-image: url(/f/91200698b76de87f559d104781e1eacf)">
                <div class="carousel-caption">
                    <div class="container">
                        <div class="row">
                            <div class="col-sm-12">
                                <div class="carousel-content centered">
                                    <h2 class="boxed animation animated-item-1 d-none d-md-block">
                                        <?= lang('home_slider_blog_title'); ?>
                                    </h2>
                                    <p class="boxed animation animated-item-1 d-block d-md-none">
                                        <?= lang('home_slider_blog_title'); ?>
                                    </p>

                                    <p class="boxed animation animated-item-2 d-none d-md-block">
                                        <?= lang('home_slider_blog_des'); ?>
                                    </p>
                                    <br>
                                    <a class="boxed btn btn-md animation animated-item-4"
                                       href="<?= base_url('blog') ?>"><?= lang('home_slider_blog_btn') ?></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="carousel-item" style="background-image: url(<?= base_url('/f/c90c521b144d97f76530ae2a46a3727d') ?>)">
                <div class="carousel-caption">
                    <div class="container">
                        <div class="row">
                            <div class="col-sm-12">
                                <div class="carousel-content centered">
                                    <h2 class="boxed animation animated-item-1 d-none d-md-block">
                                        <?= lang('home_slider_about_title'); ?>
                                    </h2>
                                    <p class="boxed animation animated-item-1 d-block d-md-none">
                                        <?= lang('home_slider_about_title'); ?>
                                    </p>

                                    <p class="boxed animation animated-item-2 d-none d-md-block">
                                        <?= lang('home_slider_about_des'); ?>
                                    </p>
                                    <br>
                                    <a class="boxed btn btn-md animation animated-item-4"
                                       href="<?= base_url('projects') ?>"><?= lang('home_slider_about_btn') ?></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="carousel-item" style="background-image: url(<?= base_url('/f/59a870203c3eae5aa1d9c831f64b32fd') ?>)">
                <div class="carousel-caption">
                    <div class="container">
                        <div class="row">
                            <div class="col-sm-6">
                                <div class="carousel-content centered">
                                    <h2 class="boxed animation animated-item-1 d-none d-md-block">
                                        <?= lang('home_slider_video_title'); ?>
                                    </h2>
                                    <p class="boxed animation animated-item-1 d-block d-md-none">
                                        <?= lang('home_slider_video_title'); ?>
                                    </p>

                                    <p class="boxed animation animated-item-2 d-none d-md-block">
                                        <?= lang('home_slider_video_des'); ?>
                                    </p>
                                    <a class="boxed btn btn-md animation animated-item-3"
                                       href="<?= $video['post_url'] ?>" target="_blank">
                                        <?= lang('home_slider_video_btn') ?>
                                    </a>
                                </div>
                            </div>
                            <div class="col-sm-6 hidden-xs animation animated-item-4">
                                <div class="centered">
                                    <a href="<?= $video['post_url'] ?>" target="_blank">
                                        <img src="<?= $video['post_img_source'] ?>" class="img-fluid">
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Controls -->
        <a class="carousel-control-prev" href="#main-slider" role="button" data-slide="prev">
                <span aria-hidden="true" class="fa fa-angle-left"
                      style="position: absolute;top: 45%;left: 50%;z-index: 5;display: inline-block;font-size: 50px;"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#main-slider" role="button" data-slide="next">
                <span aria-hidden="true" class="fa fa-angle-right"
                      style="position: absolute;top: 45%;left: 50%;z-index: 5;display: inline-block;font-size: 50px;"></span>
            <span class="sr-only">Next</span>
        </a>
</section>
<!--/#main-slider-->
<section class="container">
    <h1><?= lang('home_channels_title') ?></h1>
    <div class="row">
        <div class="row justify-content-center">
            <div class="col-xs-12 col-md-6">
                <div class="row justify-content-center">
                    <div class="col-xs-4 mx-4 m-sm-0">
                        <a href="https://www.youtube.de/KingOfDog" target="_blank">
                            <img src="/f/59768b61257e439b593ff2fb112d5079?w=200" class="img-fluid rounded">
                        </a>
                    </div>
                    <div class="col mr-4 m-sm-0">
                        <a href="https://www.youtube.de/KingOfDog" target="_blank">
                            <h2>KingOfDog</h2>
                        </a>
                        <p class="text-justify"><?= lang('home_kingofdog_des') ?></p>
                    </div>
                </div>
            </div>
            <div class="col-xs-12 col-md-6">
                <div class="row justify-content-center">
                    <div class="col-xs-4 mx-4 m-sm-0">
                        <a href="https://www.youtube.com/channel/UCossYe6KMMhf9HJ9Uaqtu-g" target="_blank">
                            <img src="/f/fbee51f02df362fc8cca5a2a177e1852?w=200" class="img-fluid rounded">
                        </a>
                    </div>
                    <div class="col mr-4 m-sm-0">
                        <a href="https://www.youtube.com/channel/UCossYe6KMMhf9HJ9Uaqtu-g" target="_blank">
                            <h2>ZeybeFX</h2>
                        </a>
                        <p class="text-justify"><?= lang('home_zeybefx_des') ?></p>
                    </div>
                </div>
            </div>
            <div class="w-100"></div>
            <div class="col-xs-12 col-md-6">
                <div class="row justify-content-center">
                    <div class="col-xs-4 mx-4 m-sm-0">
                        <a href="https://www.youtube.com/channel/UCJ1_Tj4SVkU5h9a8Q0VrB4A" target="_blank">
                            <img src="/f/b1771da2202f7fc83325520be61d961a?w=200" class="img-fluid rounded">
                        </a>
                    </div>
                    <div class="col mr-4 m-sm-0">
                        <a href="https://www.youtube.com/channel/UCJ1_Tj4SVkU5h9a8Q0VrB4A" target="_blank">
                            <h2>ZeybeOfficial</h2>
                        </a>
                        <p class="text-justify"><?= lang('home_zeybeofficial_des') ?></p>
                    </div>
                </div>
            </div>
            <div class="col-xs-12 col-md-6">
                <div class="row justify-content-center">
                    <div class="col-xs-4 mx-4 m-sm-0">
                        <a href="https://www.youtube.com/channel/UCthOkS9cpKgnBSj7AdR1rDg" target="_blank">
                            <img src="/f/972a648bc945712b44dd2b020150d3d5?w=200" class="img-fluid rounded">
                        </a>
                    </div>
                    <div class="col mr-4 m-sm-0">
                        <a href="https://www.youtube.com/channel/UCthOkS9cpKgnBSj7AdR1rDg" target="_blank">
                            <h2>KingOfDog International</h2>
                        </a>
                        <p class="text-justify"><?= lang('home_kingofdogint_des') ?></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="section-parallax"
         style="background-image:url('<?= base_url('f/b6e1fe7b54c60db4b2a36380948e932a?w=1920') ?> ')"></section>

<section class="container">
    <h1>Social Media</h1>
    <div class="social-media-list row">
        <div class="social-media-item col twitter">
            <h4>Twitter</h4>
            <a href="https://twitter.com/KingOfDogTV" target="_blank">
                <i class="fab fa-twitter icon-md icon-center"></i>
            </a>
            <h4>@KingOfDogTV</h4>
        </div>
        <div class="social-media-item col youtube">
            <h4>YouTube</h4>
            <a href="https://youtube.com/KingOfDog" target="_blank">
                <i class="fab fa-youtube icon-md icon-center"></i>
            </a>
            <h4>KingOfDog</h4>
        </div>
        <div class="social-media-item col google-plus">
            <h4>Google+</h4>
            <a href="https://google.com/+KingOfDog" target="_blank">
                <i class="fab fa-google-plus-g icon-md icon-center"></i>
            </a>
            <h4>+KingOfDog</h4>
        </div>
        <div class="social-media-item col _500px">
            <h4>500px</h4>
            <a href="https://500px.com/KingOfDog" target="_blank">
                <i class="fab fa-500px icon-md icon-center"></i>
            </a>
            <h4>KingOfDog</h4>
        </div>
        <div class="social-media-item col patreon">
            <h4>Patreon</h4>
            <a href="https://patreon.com/KingOfDog" target="_blank">
                <i class="fab fa-patreon icon-md icon-center"></i>
            </a>
            <h4>KingOfDog</h4>
        </div>
        <div class="social-media-item col steam">
            <h4>Steam</h4>
            <a href="https://steamcommunity.com/id/KingOfDog" target="_blank">
                <i class="fab fa-steam icon-md icon-center"></i>
            </a>
            <h4>KingOfDog</h4>
        </div>
        <div class="social-media-item col github">
            <h4>Github</h4>
            <a href="https://github.com/KingOfDog" target="_blank">
                <i class="fab fa-github icon-md icon-center"></i>
            </a>
            <h4>KingOfDog</h4>
        </div>
        <div class="social-media-item col twitch">
            <h4>Twitch</h4>
            <a href="https://twitch.tv/kingofdog" target="_blank">
                <i class="fab fa-twitch icon-md icon-center"></i>
            </a>
            <h4>KingOfDog</h4>
        </div>
        <div class="social-media-item col spotify">
            <h4>Spotify</h4>
            <a href="https://spotify.com/user/DMMZocker" target="_blank">
                <i class="fab fa-spotify icon-md icon-center"></i>
            </a>
            <h4>DMMZocker</h4>
        </div>
    </div>
</section>

<section class="dark">
    <div class="container">
        <h1>KOD Network</h1>
        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-6 col-lg-4">
                <h2><?= lang('home_active_users') ?></h2>
                <?php foreach ($currentlyActiveUsers as $activeUser):
                    $loginTime = strtotime($activeUser['lastLogin']); ?>
                    <div class="user-item">
                        <img src="<?= $activeUser['profile_picture'] ?>?w=50" alt="" class="img-fluid rounded-circle">
                        <div class="user-info">
                            <a href="<?= base_url('user/' . $activeUser['username']) ?>">
                                <h2><?= $activeUser['displayname'] ?></h2>
                            </a>
                            <small><?= $activeUser['follower_count'] ?> Followers | online
                                                                        seit <?= str_replace(['vor ', ' ago', 'il y a '], ['', '', ''], DateTimeHumanizer::difference(new \DateTime(), new \DateTime("@$loginTime"), $_SESSION['site_lang'])) ?></small>
                        </div>
                    </div>
                <?php endforeach; ?>
            </div>
            <div class="col-xs-12 col-sm-12 col-md-6 col-lg-4">
                <h2><?= lang('home_newest_users') ?></h2>
                <?php
                    foreach ($newestUsers as $newestUser):
                        $registeredDate = strtotime($newestUser['date_created']); ?>
                        <div class="user-item">
                            <img src="<?= $newestUser['profile_picture'] ?>?w=50" alt="" class="img-fluid rounded-circle">
                            <div class="user-info">
                                <a href="<?= base_url('user/' . $newestUser['username']) ?>">
                                    <h2><?= $newestUser['displayname'] ?></h2>
                                </a>
                                <small><?= $newestUser['follower_count'] ?> Followers |
                                                                            registriert
                                                                            seit <?= str_replace(['vor ', ' ago', 'il y a '], ['', '', ''], DateTimeHumanizer::difference(new \DateTime(), new \DateTime("@$registeredDate"), $_SESSION['site_lang'])) ?></small>
                            </div>
                        </div>
                    <?php endforeach; ?>
            </div>
            <div class="col-xs-12 col-sm-12 col-md-6 col-lg-4">
                <h2><?= lang('home_newest_posts') ?></h2>
                <ul class="comment-list">
                    <?php foreach ($newestPosts as $newestPost):
                        $this->load->view('network/posts/post_item', $newestPost);
                    endforeach; ?>
                </ul>
            </div>
        </div>
    </div>
</section>

<section class="section-parallax"
         style="background-image:url('<?= base_url('f/09ae7236fe64a83f41759413cdd6cf18?w=1920') ?>')"></section>

<section class="container">
    <div class="row">
        <h1 class="col-xs-12"><?= lang('home_posts') ?></h1>
    </div>
    <div class="row" id="social-post-container" data-error-msg="Es konnten keine weiteren Posts geladen werden!">
        <div class="col-12">
            <div class="row">
                <ul class="sort-list-filter">
                    <li>
                        <a class="btn btn-default btn-sm active" href="#"
                           data-filter="*"><?= lang('home_social_all'); ?></a>
                    </li>
                    <li>
                        <a class="btn btn-default btn-sm" href="#" data-filter=".twitter">Twitter</a>
                    </li>
                    <li>
                        <a class="btn btn-default btn-sm" href="#" data-filter=".youtube">Youtube</a>
                    </li>
                    <li data-toggle="tooltip" title="Coming soon">
                        <a class="btn btn-default btn-sm disabled" href="#" data-filter=".instagram">Twitch</a>
                    </li>
                    <li data-toggle="tooltip" title="Coming soon">
                        <a class="btn btn-default btn-sm disabled" href="#" data-filter=".instagram">Instagram</a>
                    </li>
                    <li data-toggle="tooltip" title="Coming soon">
                        <a class="btn btn-default btn-sm disabled" href="#" data-filter=".instagram">500px</a>
                    </li>
                </ul>
            </div>
        </div>

        <div class="col">
            <div class="row">
                <ul class="sort-list-items w-100 m-0" id="social-posts">
                </ul>
            </div>
        </div>
    </div>
    <button id="load-more-button" class="btn btn-default col-xs-6 col-xs-offset-3" onclick="loadPosts(false)"
            data-loading="<i class='fa fa-cog fa-spin'></i> Lädt..."
            data-load="<i class='fa fa-ellipsis-h'></i> Mehr Posts laden">
        <i class="fa fa-ellipsis-h"></i>
        Mehr Posts laden
    </button>
</section>

<section class="section-parallax"
         style="background-image:url('<?= base_url('f/aaddc4d0d5aa02b6cff5371c76a13e63?w=1920') ?>')"></section>

<section class="section-red">
    <div class="container">
        <div class="row">
            <div class="col-sm-1">
                <i class="fa fa-exclamation icon-md-alizarin" style="margin-top:30px"></i>
            </div>
            <div class="col-sm-11">
                <h2><?= lang('home_ads_title') ?></h2>
                <p><?= lang('home_ads_description') ?></p>
            </div>
        </div>
    </div>
</section>
<!--/#testimonial-->