<article class="blog-main blog-sidebar"> 

<!-- profile -->
<section>
<div class="container-fluid well span6">
    <div class="row-fluid">
        <div class="col-sm-9">
            <img class="img-circle" src="<?= $variables['avatarUrl'] ?>">
        </div>

        <div class="col-sm-3">
            <?php
            if (!$variables['viewingLoggedInUser']) {
                if (!$variables['friendsWithDisplayedUser']) {
                    ?>
                    <a pageTarget="viewprofile&id=<?=$variables['id']?>&befriend=1">
                        <button class='btn pull-right' style="color: #ffffff; background-color: #ff009d; border-color: #FF009D"><span class='glyphicon glyphicon-heart'></span> Anfreunden </button>
                    </a>
                    <?php
                } else {
                    ?>
                    <a pageTarget="viewprofile&id=<?=$variables['id']?>&befriend=0">
                        <button class='btn btn-danger pull-right'><span class='glyphicon glyphicon-remove'></span> Abservieren </button>
                    </a>
                    <?php
                }
            }
            ?>
        </div>
        <div class="col-sm-12">
            <h3>
                <?= $variables['firstName'] ?>
                <?= $variables['lastName'] ?>
            </h3>
            <h6>Email: <?= $variables['email']?></h6>


            <?php
            if(isset($variables['bday'])){
                echo "<h6>Geburtstag: " .$variables['bday'] . "</h6>";
            }
            ?>
            <?php
            if(isset($variables['phone'])){
                echo "<h6>Handynummer: " . $variables['phone'] . "</h6>";
            }
            ?>

        </div>
        <div class="col-sm-12 row">
            <div class="col-md-3">links</div>
            <div class="col-md-6 text-center">Politische Ausrichtung</div>
            <div class="col-md-3 text-right">rechts</div>
        <input type="range" min="-50" max="50" value="<?= $variables['politicalDir'] ?>" disabled>
        <br>
        <div class="col-sm-9">
            <?php
            if(!$variables['viewingLoggedInUser']){ ?>
                <a pageTarget="viewprofile&id=<?=$variables['id']?>&like=1">
                    <button class='btn btn-success <?=$variables['buttonActive']==1 ? 'active' : ''?>'><span class='glyphicon glyphicon-thumbs-up'></span>  Du bist nett</button>
                </a>
                <a pageTarget="viewprofile&id=<?=$variables['id']?>&like=0">
                    <button class='btn btn-danger <?=$variables['buttonActive']==2 ? 'active' : ''?>'><span class='glyphicon glyphicon-thumbs-down'></span>  Du bist blöd</button>
                </a>
            <?php } ?>
        </div>
        <div class="col-sm-3 text-center">
            <div class="btn"> <?= $variables['karma'] ?> Karma </div>
        </div>
</div>
</div>
</section>

<!-- ab hier wird gelästert-->
<section class='section-post' >
    <form actionTarget="viewprofile&id=<?= $variables['id'] ?>">
<div class='bubble bubble-right create-post' >
    <ul class="nav nav-tabs" role="tablist">
        <li class=""><label>Was willst du loswerden?</label></li>
        <li role="presentation" class="active"><a href="#text" role="tab" data-toggle="tab">Text</a></li>
        <li role="presentation"><a href="#image" role="tab" data-toggle="tab">Bild</a></li>
        <li role="presentation"><a href="#video_youtube" role="tab" data-toggle="tab">Youtube-Video</a></li>
    </ul>

    <!-- The server needs to know which tab is active -->
    <script>
        $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
            $('input[name=activeTab]').val($(e.target).attr('href'));
        });
    </script>
    <input type="hidden" name="activeTab" value="#text">

    <!-- Tab panes -->
    <div class="tab-content">
        <div role="tabpanel" class="tab-pane active" id="text">
            <textarea class="form-control" name="text_message" rows="5" placeholder="TL;DR"></textarea >
        </div>
        <div role="tabpanel" class="tab-pane" id="image">
            <input class="form-control" type="text" name="image_url" placeholder="Link zum Bild">
        </div>
        <div role="tabpanel" class="tab-pane" id="video_youtube">
            <input class="form-control" type="text" name="youtube_url"
                   placeholder="Youtube Link, z.B. https://youtube.com/watch?v=vTZCjCYsytM">
        </div>
    </div>
    <button class='btn btn-success' type='submit'>Absenden</button >
    <?php
    if(!$variables['viewingLoggedInUser']){ ?>
        <label class='checkbox-inline'><input type='checkbox' name="gossip">Diese Nachricht soll gelästert werden</label>
    <?php } ?>
</div>
</form>
</section>

<?php
foreach($variables['postsRender'] as $i => $post_rendered) {
    $post = $variables['posts'][$i];
?>
    <!-- show posts -->
    <section class="section-post">
        <div class="bubble <?= ($i % 2) ? 'bubble-left' : 'bubble-right' ?> <?= ($post->isGossip() ? 'gossip' : '') ?>">
            <h4>
                <?= $post->getAuthor()->getFullName() ?>
                <?= $post->isGossip() ? 'lästert' : 'schreibt' ?>:
            </h4>
            <?= $post_rendered ?>
        </div>
    </section>
<?php
}
?>
</article>