<!--------------- ------------------->
<!-- Speakers                      -->
<!--------------- ------------------->

<section id="speakers">
<?php if (get_field('speakers', 31)): ?>
    <?php while (has_sub_field('speakers', 31)): ?>

        <?php
        // vars
        $name = get_sub_field('name');
        $image = get_sub_field('image');
        $short_bio = get_sub_field('excerpt');
        $long_bio = get_sub_field('description');
        $about_talk = get_sub_field('about_talk');
        $twitter = get_sub_field('twitter_link');
        $xing = get_sub_field('xing_link');
        $link = get_sub_field('more_link');
        $status = get_sub_field('speaker_status');
        ?>

        <?php if ($status == "keynote"): ?>
            <!-- Keynote speaker -->
            <div class="speaker-keynote row">
            <span class="icon-keynote"></span>

            <h3>Keynote <br>Speaker</h3>

            <div class="speaker">
                <div class="about">
                    <div class="picture-frame">
                        <?php if ($image) : ?>
                            <img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>"
                                 class="desaturate">
                            <?php ;
                        else: ?>
                            <img
                                src="<?php echo get_stylesheet_directory_uri(); ?>/assets/img/speaker/avatar-dummy.jpg"
                                alt="picture goes here" class="dummy-frame">
                            <?php ; endif; ?>
                    </div>

                    <h4 class="name"><?php echo $name; ?></h4>

                    <p class="short-info collapsed" data-toggle="collapse" data-parent=".speaker"
                       href="#collapseKeynote">
                        <?php echo $short_bio; ?> <span class="view-more">view more</span>
                    </p>

                    <p id="collapseKeynote" class="long-info collapse">
                        <?php echo $long_bio; ?>
                    </p>

                    <a href="" class="more" data-toggle="modal" data-target="#keynoteModal">
                        <p>More about talk</p>
                        <span class="icon-plus"></span>
                    </a>
                </div>

                <div class="contact">
                    <a href="<?php echo $twitter; ?>" class="icon-twitter"></a>
                    <a href="<?php echo $xing; ?>" class="icon-xing"></a>
                </div>

            </div>

            <div class="modal fade in" id="keynoteModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
                            <h4 class="modal-title"><?php echo $name;?></h4>
                        </div>
                        <div class="modal-body">
                            <?php echo $about_talk; ?>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="modal fade bs-example-modal-sm" id="keynoteModal" tabindex="-1" role="dialog"
                 aria-labelledby="mySmallModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-sm">
                    <div class="modal-content">
                        <?php echo $about_talk; ?>
                    </div>
                </div>
            </div>
        <?php endif; ?>
    <?php endwhile; ?>
    </div>

    <!-- -------------- -->
    <!-- MAIN SPEAKERS -->
    <!-- -------------- -->
    <span class="icon-speaker"></span>

    <h2>Die Moderatoren</h2>


    <div class="speakers-main row">
        <?php $i = 0;
        while (have_rows('speakers', 31)):
            the_row();
            // vars
            $name = get_sub_field('name');
            $collapseID = "main" . $i;
            $image = get_sub_field('image');
            $short_bio = get_sub_field('excerpt');
            $long_bio = get_sub_field('description');
            $twitter = get_sub_field('twitter_link');
            $xing = get_sub_field('xing_link');
            $link = get_sub_field('more_link');
            $status = get_sub_field('speaker_status');
            ?>
            <?php if ($status == "main"): ?>
            <div class="speaker">
                <div class="about">
                    <div class="picture-frame">
                        <?php if ($image) : ?>
                            <img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>"
                                 class="desaturate">
                            <?php ;
                        else: ?>
                            <img
                                src="<?php echo get_stylesheet_directory_uri(); ?>/assets/img/speaker/avatar-dummy.jpg"
                                alt="picture goes here" class="dummy-frame">
                            <?php ; endif; ?>
                    </div>

                    <h4 class="name"><?php echo $name; ?></h4>

                    <p class="short-info collapsed" data-toggle="collapse" data-parent=".speaker"
                       href="#<?php echo $collapseID; ?>">
                        <?php echo $short_bio; ?> <span class="view-more">view more</span>
                    </p>

                    <p id="<?php echo $collapseID;
                    $i++ ?>" class="long-info collapse">
                        <?php echo $long_bio; ?>
                    </p>

                    <a href="<?php echo $link; ?>" class="more">
                        <p>More about talk</p>
                        <span class="icon-plus"></span>
                    </a>

                </div>

                <div class="contact">
                    <a href="<?php echo $twitter; ?>" class="icon-twitter"></a>
                    <a href="<?php echo $xing; ?>" class="icon-xing"></a>
                </div>
            </div>
        <?php endif; ?>
        <?php endwhile; ?>
    </div>
    <!-- -------------- -->
    <!-- REGULAR SPEAKERS -->
    <!-- -------------- -->

    <div class="speakers-other">
        <h3>Speaker</h3>

        <div class="row">
            <div class="owl-carousel" id="speaker-slider">
                <?php $i = 0;
                while (have_rows('speakers', 31)):
                    the_row();
                    // vars
                    $name = get_sub_field('name');
                    $image = get_sub_field('image');
                    $collapseID = "regular" . $i;
                    $short_bio = get_sub_field('excerpt');
                    $long_bio = get_sub_field('description');
                    $twitter = get_sub_field('twitter_link');
                    $xing = get_sub_field('xing_link');
                    $link = get_sub_field('more_link');
                    $status = get_sub_field('speaker_status');
                    ?>
                    <?php if ($status == "regular"): ?>
                    <div class="speaker">
                        <div class="about">
                            <div class="picture-frame">
                                <?php if ($image) : ?>
                                    <img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>"
                                         class="desaturate">
                                    <?php ;
                                else: ?>
                                    <img
                                        src="<?php echo get_stylesheet_directory_uri(); ?>/assets/img/speaker/avatar-dummy.jpg"
                                        alt="picture goes here" class="dummy-frame">
                                    <?php ; endif; ?>
                            </div>
                            <h4 class="name"><?php echo $name; ?></h4>

                            <p class="short-info collapsed" data-toggle="collapse" data-parent=".speaker"
                               href="#<?php echo $collapseID; ?>">
                                <?php echo $short_bio; ?> <span class="view-more">view more</span>
                            </p>

                            <p id="<?php echo $collapseID;
                            $i++ ?>" class="long-info collapse">
                                <?php echo $long_bio; ?>
                            </p>
                            <a href="<?php echo $link ?>" class="more">
                                <span class="plus">+</span>

                                <p>More about talk</p>
                            </a>
                        </div>

                        <div class="contact">
                            <a href="<?php echo $twitter; ?>" class="icon-twitter"></a>
                            <a href="<?php echo $xing; ?>" class="icon-xing"></a>
                        </div>
                    </div>
                <?php endif; ?>
                <?php endwhile; ?>
            </div>
        </div>
    </div>

<?php endif; ?>
</section>