{% extends 'Base/base.html' %}
{% block body %}
        <div class="friends">
            <div class="list">
                <ul>
                    {% for row in data.friends %}
                    <li class="new">
                        <div class="avatar">
                            <img src="{{fpath}}/avatarimage?figure={{row.figure}}&headonly=1" style="margin-top: -15px;margin-left: -10px;">
                            <div class="status online"></div>
                        </div>
                        <div class="content">
                            <div class="title">{{row.username}}</div>
                        </div>
                    </li>
                    {% endfor %}
                </ul>
            </div>
        </div>

       <!-- <div class="page-content" style="margin-bottom: -25px">
            <div class="left-side">
                <article class="default-section">
                    <div class="content-side">
                        <h3 class="aside-title">Habbix est aussi disponible pour tes amis !</h3>

                        <div class="invitation-link-container">
                            <div class="copytext">
                                <p>Habbix est encore plus amusant quand tu peux le partager avec de vrais amis ! Envoie une invitation à tes amis et s'ils créent un compte et jouent à Habbix tu recevras un petit cadeau ! Plus d'amis, plus de plaisir, plus de cadeaux !</p>
                                <input type="text" class="rounded-input blue-active username" onclick="this.focus();this.select()" readonly="readonly" value="{{path}}/register/{{player.username}}" style="width:100%">
                            </div>
                        </div>
                    </div>-->

                </article>
            </div>

            <div class="right-side">
                <article class="default-section">
                    <div class="content-side">
                        <h3 class="aside-title">MasterRadio - <div id="listeners" style="display: inline-block">0</div> Luisteraars</h3>

                        <div class="no-icons" style="text-align: center">
                            <audio controls {% if data.allow_radio %}autoplay{% endif %} id="streamPlayer" style="width: 75%"></audio>
                        </div>
                    </div>
                </article>
            </div>
        </div>

        <div class="page-content">
            <div class="articles-container">
                {% for row in data.news %}
                <div class="article-container" data-id="{{row.id}}">
                    <a href="{{path}}/news/{{row.id}}-{{row.slug}}" class="article-content pixelated" style="background-image: url({{row.header}});">
                        <div class="article-header">
                            <div class="article-category"></div>
                            <div class="article-separation" style="background-color: {{row.header_color}};"></div>
                            <div class="article-title title" data-id="{{row.id}}">{{row.title}}</div>
                            <div class="article-title title-sub" data-id="{{row.id}}" style="display:none">{{row.description}}</div>
                        </div>
                    </a>
                </div>
                {% endfor %}
            </div>

            <div class="load-more-button">
                <button class="rounded-button">Plus d'articles</button>
            </div>
        </div>
{% endblock %}