<!DOCTYPE html>
<html lang="de">

<head>
    <!-- These meta tags come first. -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title> - Youthweb Styleguide</title>
    <!-- Include the CSS -->
    <link href="../../dist/toolkit.min.css" rel="stylesheet">
    <meta name="theme-color" content="#1c60a1">
</head>

<body>
    <script type="text/javascript">
        app_settings = {
            // Profildaten zum eingeloggten User
            // TODO: Refactoring profile-settings
            profile: null,
            urls: {
                // Wegen eines Bugs in Fractal wird z.B. `_config.project.baseUrl` statt `baseUrl` verwendet
                // @see https://github.com/frctl/fractal/issues/1042
                'root': 'https://styleguide.youthweb.net/components/preview',
                'baseUrl': 'http://localhost:8000',
                'communityJsonHost': 'http://localhost:8000',
                'imagesUploadUrl': 'http://localhost:8000/imageUpload',
            },
            'loaderUIDelay': 1000, //Asynchrone Funktionen fühlen sich flüssiger an, wenn es aufgrund eines künstlichen Delays nicht flackert
            'redirectDelay': 3000, //Bei Redirects sollten die Nutzer die Möglichkeit haben, den Bestätigungstext zu sehen
            'locale': window.navigator.userLanguage || window.navigator.language, // z.B. 'de' oder 'de_DE'
        };
    </script>
    <div id="app">
        <div class="with-top-navbar">
            <div class="growl" id="app-growl"></div>
            <add-friend></add-friend>
            <report-user></report-user>
            <error-message></error-message>

            <nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-yw-gradient-primary app-navbar" id="mainNavigation">
                <a class="navbar-brand" href="https://styleguide.youthweb.net/components/preview/timeline"><img src="../../dist/img/logo-16.png" alt="Youthweb" /></a>

                <div class="collapse navbar-collapse" id="navbarResponsive" data-parent="#mainNavigation">
                    <ul class="navbar-nav mr-auto">
                        <li class="nav-item">
                            <a class="nav-link" href="https://styleguide.youthweb.net/components/preview/forum">Forum</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="https://styleguide.youthweb.net/components/preview/live">Zeugnisse</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="https://styleguide.youthweb.net/components/preview/praystation">Gebetsanliegen</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="https://styleguide.youthweb.net/components/preview/groups">Gruppen</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="https://styleguide.youthweb.net/components/preview/events">Events</a>
                        </li>
                        <li class="nav-item ">
                            <a class="nav-link" href="https://styleguide.youthweb.net/components/preview/live">Impulse</a>
                        </li>
                    </ul>

                    <search-user source="/" type="users" target="user/{0}" id="autosuggest__navbar"></search-user>
                </div>
                <a class="nav-link-with-icon ml-auto" href="https://styleguide.youthweb.net/components/preview/messenger">
                    <span class="icon icon-chat"></span> <!-- TODO: <unread-messages></unread-messages> -->
                </a>
                <a class="nav-link-with-icon" href="https://styleguide.youthweb.net/components/preview/notifications">
                    <span class="icon icon-bell"></span> </a>
                <button class="navbar-btn-avatar ml-2" type="button" data-toggle="collapse" data-target="#profilePopover" aria-controls="profilePopover" aria-expanded="false" aria-label="Toggle profile">
                    <img class="rounded-circle" src="">
                </button>

                <button class="navbar-toggler d-lg-none ml-2" type="button" data-toggle="collapse" data-target="#navigationPopover" aria-controls="navigationPopover" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="icon icon-menu"></span>
                </button>
            </nav>

            <div id="navigationPopover" class="collapse w-100 d-lg-none" role="dialog" data-toggle="collapse" data-target="#navigationPopover" aria-controls="navigationPopover">

                <div class="navbar navbar-dark bg-yw-gradient-primary" onclick="event.stopPropagation();">
                    <div class="navbar-collapse">
                        <div class="w-100">
                            <search-user source="/" type="users" target="user/{0}" id="autosuggest__popover"></search-user>
                        </div>
                        <ul class="navbar-nav mr-auto">
                            <li class="nav-item">
                                <a class="nav-link" href="https://styleguide.youthweb.net/components/preview/forum">Forum</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="https://styleguide.youthweb.net/components/preview/live">Zeugnisse</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="https://styleguide.youthweb.net/components/preview/praystation">Gebetsanliegen</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="https://styleguide.youthweb.net/components/preview/groups">Gruppen</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="https://styleguide.youthweb.net/components/preview/events">Events</a>
                            </li>
                            <li class="nav-item ">
                                <a class="nav-link" href="https://styleguide.youthweb.net/components/preview/live">Impulse</a>
                            </li>
                        </ul>
                        <div class="dropdown-divider"></div>
                        <ul class="navbar-nav mr-auto">
                            <li class="nav-item">
                                <a class="nav-link " href="https://styleguide.youthweb.net/components/preview/blog">Blog</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link " href="https://styleguide.youthweb.net/components/preview/page/team">Über uns</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link " href="https://styleguide.youthweb.net/components/preview/docs/index.html">Hilfe</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link " href="https://styleguide.youthweb.net/components/preview/page/develop">Develop</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link " href="https://styleguide.youthweb.net/components/preview/page/privacy">Datenschutz</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link " href="https://styleguide.youthweb.net/components/preview/page/impressum">Impressum</a>
                            </li>
                        </ul>
                        <div class="dropdown-divider"></div>
                        <ul class="navbar-nav ">
                            <li class="nav-item">
                                <a class="app-notifications nav-link" href="https://www.facebook.com/youthweb.net">
                                    Facebook
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="app-notifications nav-link" href="https://www.instagram.com/youthwebnet/">
                                    Instagram
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="app-notifications nav-link" href="https://twitter.com/youthwebnet">
                                    Twitter
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="app-notifications nav-link" href="https://www.pinterest.de/youthwebnet/">
                                    Pinterest
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="app-notifications nav-link" href="https://shop.spreadshirt.de/youthweb">
                                    Shop
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

            <div id="profilePopover" class="collapse w-100" role="dialog" data-toggle="collapse" data-target="#profilePopover" aria-controls="profilePopover">
                <div class="float-right m-2" onclick="event.stopPropagation();">
                    <div class="card card-profile mb-4 ">
                        <div class="card-header bg-secondary"></div>
                        <div class="card-body text-center">
                            <a href="https://styleguide.youthweb.net/components/preview/users/">
                                <img class="card-profile-img" src="">
                            </a>

                            <h6 class="card-title">
                                <a class="text-inherit" href="user"></a>
                            </h6>

                            <p class="mb-4"></p><!-- Verhältnis zu Lebensmotto? -->

                            <ul class="card-menu">
                                <li class="card-menu-item">
                                    <a href="https://styleguide.youthweb.net/components/preview/users//friends" class="text-inherit">
                                        Freunde
                                        <h6 class="my-0"></h6>
                                    </a>
                                </li>

                                <li class="card-menu-item">
                                    <a href="https://styleguide.youthweb.net/components/preview/participation/hall-of-fame" class="text-inherit">
                                        CP
                                        <h6 class="my-0"></h6>
                                    </a>
                                </li>
                            </ul>
                        </div>
                        <ul class="list-group list-group-flush">
                            <li class="list-group-item">
                                <div class="">
                                    <a href="https://styleguide.youthweb.net/components/preview/account/settings" class="btn btn-secondary btn-block"><i class="fas fa-user-cog"></i> Account</a>
                                    <a href="https://styleguide.youthweb.net/components/preview/account/profile_settings" class="btn btn-secondary btn-block"><i class="fas fa-user-circle"></i> Profil</a>
                                    <a href="https://styleguide.youthweb.net/components/preview/account/ignorelist" class="btn btn-secondary btn-block"><i class="fas fa-eye-slash"></i> Ignoreliste</a>
                                </div>
                            </li>
                            <li class="list-group-item"><a href="https://styleguide.youthweb.net/components/preview/logout"><i class="fas fa-sign-out-alt"></i> Logout</a></li>
                        </ul>
                    </div>
                    <div class="card mb-4">
                        <div class="card-body">
                            <h6 class="card-title">Über mich<small> · <a href="https://styleguide.youthweb.net/components/preview/users/">Zum Steckbrief</a></small></h6>
                            <p><i class="fas fa-user"></i> Angemeldet vor 1 Jahr|Angemeldet vor undefined Jahren
                            </p>
                            <p>
                                <i class="fas fa-star"></i> 15.04.2022 (undefined Jahre alt)
                            </p>
                            <p>
                                <i class="fas fa-user-friends"></i> Gruppen: Keine
                            </p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="container pt-4 pb-5">

                <div class="row">
                    <div class="col-lg-3">
                    </div>
                    <div class="col-lg-6">
                    </div>
                    <div class="d-none d-lg-block d-xl-block col-lg-3">
                        <div class="card card-profile mb-4 ">
                            <!-- maxh298: background sollte eher Breitformatbild sein, max. Darstellungshöhe: 149px, maxh298 ist Puffer für 1:2 Verhältnis -->
                            <div class="card-header bg-secondary" style=""></div>
                            <div class="card-body text-center">
                                <a href="https://styleguide.youthweb.net/components/preview/users/">
                                    <img class="card-profile-img" src="">
                                </a>

                                <h6 class="card-title">
                                    <a class="text-inherit" href="https://styleguide.youthweb.net/components/preview/users/"></a>
                                </h6>

                                <p class="mb-4"></p><!-- Verhältnis zu Lebensmotto? -->

                                <ul class="card-menu">
                                    <li class="card-menu-item">
                                        <a href="https://styleguide.youthweb.net/components/preview/users//friends" class="text-inherit">
                                            <!--@Frontend Integration: URL aus Profile -->
                                            Freunde
                                            <h6 class="my-0"></h6>
                                        </a>
                                    </li>

                                    <li class="card-menu-item">
                                        <a href="https://styleguide.youthweb.net/components/preview/participation/hall-of-fame" class="text-inherit">
                                            CP
                                            <h6 class="my-0"></h6>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="card mb-4">
                            <div class="card-body">
                                <h6 class="card-title">Über mich<small> · <a href="https://styleguide.youthweb.net/components/preview/users/">Zum Steckbrief</a></small></h6>
                                <p><i class="fas fa-user fa-fw"></i> Angemeldet vor 1 Jahr|Angemeldet vor undefined Jahren
                                </p>
                                <p>
                                    <i class="fas fa-star fa-fw"></i> 15.04.2022 (undefined Jahre alt)
                                </p>
                                <p>
                                    <i class="fas fa-user-friends fa-fw"></i> Gruppen: Keine
                                </p>
                            </div>
                        </div>
                        <div class="card mb-4 d-none d-lg-flex">
                            <div class="card-header">Youthweb</div>

                            <ul class="list-group list-group-flush">
                                <li class="list-group-item">
                                    <a href="https://styleguide.youthweb.net/components/preview/blog">Blog</a>
                                    <a href="https://styleguide.youthweb.net/components/preview/page/team">Über uns</a>
                                    <a href="https://styleguide.youthweb.net/components/preview/docs/index.html">Hilfe</a>
                                    <a href="https://styleguide.youthweb.net/components/preview/page/develop">Develop</a>
                                    <a href="https://styleguide.youthweb.net/components/preview/page/privacy">Datenschutz</a>
                                    <a href="https://styleguide.youthweb.net/components/preview/page/impressum">Impressum</a>
                                </li>
                                <li class="list-group-item text-center d-none d-lg-flex">
                                    <!---->
                                    <a class="brand-nav" href="https://www.facebook.com/youthweb.net"><i class="fab fa-facebook-f"></i></a>
                                    <a class="brand-nav" href="https://www.instagram.com/youthwebnet/"><i class="fab fa-instagram"></i></a>
                                    <a class="brand-nav" href="https://twitter.com/youthwebnet"><i class="fab fa-twitter"></i></a>
                                    <a class="brand-nav" href="https://www.pinterest.de/youthwebnet/"><i class="fab fa-pinterest-p"></i></a>
                                    <a class="brand-nav" href="https://shop.spreadshirt.de/youthweb"><i class="fas fa-shopping-basket"></i></a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="../../dist/toolkit.min.js"></script>
</body>

</html>
{% extends '_base.html.twig' %}

{% block body %}
<div id="app">
  <div class="with-top-navbar">
    <div class="growl" id="app-growl"></div>
    <add-friend></add-friend>
    <report-user></report-user>
    <error-message></error-message>

    {% include 'shared/partials/navigation-main.html.twig' %}

    {% block header %}{% endblock %}
    <div class="container pt-4 pb-5" >

      <div class="row">
        <div class="col-lg-3">
          {% block leftcol %}{% endblock %}
        </div>
        <div class="col-lg-6">
          {% block content %}{% endblock %}
        </div>
        <div class="d-none d-lg-block d-xl-block col-lg-3">
          {% include 'user/partials/profile-cards.html.twig' %}
          {% include 'community/partials/youthweb-links.html.twig' %}
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}
/* No context defined. */

Dieses Layout wird für alle Bereiche verwendet, die nur nach einer Anmeldung sichtbar sind.