{% extends 'App::layout_quiz.html.twig' %}

{% block title %}Discord{% endblock %}

{% block stylesheet %}
    <style>
    .discord {
        background-color: #2c2f33;
    }
    .discord h1 {
        color: #fff;
        font-size: 32px;
        font-weight: 600;
        margin-bottom: 18px;
    }
    .discord p {
        color: #dcddde;
        font-size: 16px;
        font-weight: 500;
        line-height: 24px;
        margin: 18px 0;
        display: block;
    }
    .discord-label {
        color: #dcddde;
        font-size: 16px;
        font-weight: 500;
        line-height: 24px;
        margin: 18px 0;
        display: block;
    }


    /*
    [1]: All items a forced onto a single line, causing the overflow when necessary.
    [2]: Automatic overflow means a scroll bar won’t be present if it isn’t needed
    [3]: Make it smooth scrolling on iOS devices before 
    [4]: Hide the ugly scrollbars in Edge until the scrollable area is hovered
    [5]: Hide the scroll bar in WebKit browsers
    */
    .scroll {

        background-color: #7289da;



      white-space: nowrap; /* [1] */
      overflow-x: auto; /* [2] */
      -webkit-overflow-scrolling: touch; /* [3] */
      -ms-overflow-style: -ms-autohiding-scrollbar; /* [4] */ }

    /* [5] */
    .scroll::-webkit-scrollbar {
      display: none; }

    .scroll a {
        color: #fff;
    }
    </style>
{% endblock %} 

{% block body %}





    <div class="img-cover" style="background-color: #7289da;">
        <div class="container m-t-0">
            <div class="row text-center">
                <div class="col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1">
                    <h1 class="no-m font-thin" style="color: white;font-size: 24px;">Discord<b>!</b></h1>

                </div>
            </div>
        </div>
    </div>   


<header class="scroll">
  <nav>
    
    <a class="btn btn-lg btn-text" href="http://iamsteve.me/blog">Blog</a>
    <a class="btn btn-lg btn-text" href="http://iamsteve.me/portfolio">Portfolio</a>
    <a class="btn btn-lg btn-text" href="http://iamsteve.me/downloads">Downloads</a>
    <a class="btn btn-lg btn-text" href="http://iamsteve.me/about">About</a>
    <a class="btn btn-lg btn-text" href="http://iamsteve.me/contact">Contact</a>
    <a class="btn btn-lg btn-text" href="http://iamsteve.me/contact">WWW</a>
    <a class="btn btn-lg btn-text" href="http://iamsteve.me/contact">XXXXXX</a>
    <a class="btn btn-lg btn-text" href="http://iamsteve.me/contact">ZZ</a>
  </nav>
</header>

    <div class="content-padding p-t-20 discord">
        <div class="container">
            <div class="row">
                <div class="col-md-12">

                    

                    {% if membersDiscord %}


                        <p><span class="badge badge-success" style="background-color: #9b59b6">GET</span> <small>https://discordapp.com/api/v6/guilds/{guild_id}/members</small> - <b>Members of guild</b></p>
                        {% if membersDiscord.members %}
                            <p><b>{{ membersDiscord.members|length }}<b> members</p>
                            {% for member in membersDiscord.members %}
                                <div style="font-size: 12px;">
                                <p><i class="fa fa-circle" aria-hidden="true" style="color: {% if member.roles|length > 0 %}#2ecc71{% else %}#2980b9{% endif %}"></i> <b>{{ member.nick }}</b>  {{ member.user.username }}#{{ member.user.discriminator }} <span class="badge badge-success" style="background-color: #f39c12">{{ member.user.id }}</span>
                                {{ member.joined_at|date("d/m/Y H:i") }}</p>
                                </div>
                            {% endfor %}
                        {% else %}
                            NULL
                        {% endif %}


                        <p><span class="badge badge-success" style="background-color: #9b59b6">GET</span> <small>https://discordapp.com/api/users/@me/guilds</small> - <b>Guilds</b></p>
                        {% if membersDiscord.guild %}
                            {% for guild in membersDiscord.guild %}
                            <p><i class="fa fa-circle" aria-hidden="true" style="color: #3498db"></i> <b>{{ guild.name }}</b></p>
                            {% endfor %}
                        {% else %}
                            NULL
                        {% endif %}

                        <p><span class="badge badge-primary" style="background-color: #9b59b6">GET</span> <small>https://discordapp.com/api/v6/users/@me</small> - <b>Current user</b></p>
                        {% if membersDiscord.user %}
                        <div style="font-size: 12px;">
                            <p><b>{{ membersDiscord.user.username }}</b>#{{ membersDiscord.user.discriminator }}</p>
                            <p>id : {{ membersDiscord.user.id }}</p>
                            <p>username : {{ membersDiscord.user.username }}</p>
                            <p>avatar : {{ membersDiscord.user.avatar }}</p>
                            <p>discriminator : {{ membersDiscord.user.discriminator }}</p>
                            <p>public_flags : {{ membersDiscord.user.public_flags }}</p>
                        </div>
                        {% else %}
                            NULL
                        {% endif %}

                        <p><span class="badge badge-success" style="background-color: #9b59b6">GET</span> <small>https://discordapp.com/api/v6/guilds/{guild_id}/invites</small> - <b>Invites of guild</b></p>
                        {% if membersDiscord.invites %}
                            {% for invite in membersDiscord.invites %}
                        
                                <p>{{ invite.code }}</p>

                            {% endfor %}
                        {% else %}
                            NULL
                        {% endif %}
                    {% endif %}

                    <hr />

                    {% if userDiscord %}
                        <h1><b>{{ userDiscord.username }}</b>#{{ userDiscord.discriminator }}</h1>
                        <p>id : <span class="badge badge-success">{{ userDiscord.id }}</span></p>
                        <p>username : {{ userDiscord.username }}</p>
                        <p>avatar : {{ userDiscord.avatar }}</p>
                        <p>discriminator : {{ userDiscord.discriminator }}</p>
                        <p>public_flags : {{ userDiscord.public_flags }}</p>
                    {% endif %}
                    <hr />

                    <h1>Widget</h1>
                    <p><b>{{ widgetDiscordMembers.membersOnlineCount }}</b> membres <b style="color:green;">en ligne</b>.</p>

                 

                    <ul>
                        {% for member in widgetDiscord.members %}
                            <li><img width="100" src="{{ member.avatar_url }}"> #{{ member.id }} - <b>{{ member.username }}</b> - 

                                {% if member.status == 'online' %}
                                    <span class="badge badge-success">Online</span>
                                {% elseif member.status == 'dnd' %}
                                    <span class="badge badge-discord">dnd</span>
                                {% else %}
                                    {{ member.status }}
                                {% endif %}

                            </li>
                        {% endfor %}
                    </ul>
                    <hr />

                    <p><a href="https://discordapp.com/users/228614026597236757" target="_BLANK">discordapp.com/users/228614026597236757</a></p>

                    <hr />
                    <h1>Envoyer un message</h1>
                    <p>Send automated Discord messages through Webhooks using JavaScript</p>
                    <textarea id="msg" class="form-control" aria-label="With textarea"></textarea>
                    <p class="text-center">
                        <a class="btn btn-discord" onclick="sendMessage()"><b>Send</b></a>
                    </p>
                    <hr />
                    {{ form_start(formDiscord, {'attr': {'novalidate': 'novalidate'}}) }}
                    {{ form_row(formDiscord) }}
                    {{ form_end(formDiscord) }}
                    <hr />
                    <p class="text-center">
                        <a class="btn btn-discord" href="https://discord.gg/MyWkZwsZty"  target="_blank"><b>Recevez une invitation</b></a>
                    </p>

                </div>
            </div>
        </div>
    </div>

{% endblock body %}

{% block javascripts %}

<script>

    function xmlHttp(msg) 
    {
        var request = new XMLHttpRequest();
        var url = 'https://discord.com/api/webhooks/781180104788541493/VbPsp67-D9lqH_hqVBN70bK4a5ReiBDYqTZDAY_s8sc9TCCCpB2Pkd8IBFFdXUoGytDx';
        request.open("POST", url);

        request.setRequestHeader('Content-type', 'application/json');

        var params = {
            username: "Subscribers",
            avatar_url: "https://media.discordapp.net/attachments/780742373528305676/781518078529110046/apple-touch-icon-120x120.png",
            content: msg
        }

        request.send(JSON.stringify(params));

        console.log("Discord: message sended :");
        console.log(msg);
    }

    function sendMessage() 
    {
        console.log("Discord: message is sending...");
        var msg = document.getElementById("msg").value;
        if (msg)
        {
            xmlHttp(msg);
        }
        else
        {
            console.log("Message is empty.");
        }
    }

</script>

{% endblock javascripts %}