{% extends "/shared/_layout.html" %}

{% block content %}

        <script>

        function setTrumpColor(color) {
            let player = "{{player}}"
            var msg = {
                type: "message",
                fct: "setTrumpColor",
                player: player,
                color: color
            };
            let t = JSON.stringify(msg);
            window.game_socket.send(t);
        }

        function setupGame(player_names) {

        }

        </script>

        <div class="content">
            <h1><span class="font-semi-bold">Gambling Foo</span> <span class="smaller">A RESTful gaming service</span></h1>
            <p class="lead">
                Play a nice game of cards?<br>
                <br>
                <strong>Player {{player+1}} view</strong><br>
                <strong> Table </strong><br>
                {% for player,card in played_cards %}
                  ||
                  {{player.name}}: {{card}}
                {% endfor %}
                ||
                <br>
                <sub>
                <strong>Tricks:</strong>
                {% for player,_ in last_trick %}
                  ||
                  {{player.name}}: {{player.tricks_taken}}
                {% endfor %}
                ||
                <br>
                <strong>Last Trick:</strong>
                {% for player,card in last_trick %}
                  ||
                  {{player.name}}: {{card}}
                {% endfor %}
                ||
                </sub>
                <br>
                <strong> Your cards: </strong>
            <ul>
                <li>
                    <strong>Trump Card: {{trump_card}}</strong><br>
                    <strong>Trump Color: {{trump_color}}</strong><br>
                </li>

                {% for card in cards %}
                    <li>
                        <strong>>card {{loop.index}} is: {{card}} </strong><br>
                         {% if playerActive and not choose_trump_color %}
                            <!--
                            <a href="/player/{{player}}/play/{{loop.index0}}">play card {{loop.index}}&lt;{{card}}&gt;</a>
                            <div style="background-color:#D94A38;width:170px;height:80px;margin:20px;padding-top:20px;color:#ffffff;font-weight:bold;font-size:18px;float:left;text-align:center;" onclick="playCard({{loop.index0}})">Play Me</div>
                            -->
                        <button onclick="playCard({{loop.index0}})">Play {{card}}</button>
                        {% endif %}
                    </li>
                {% endfor %}
                {% if choose_trump_color and (player == choose_trump_player) %}
                <strong>Choose Trump Color:</strong>
                <!--
                <a href="/player/{{player}}/set_trump/r">Red&gt;</a>
                <a href="/player/{{player}}/set_trump/g">Green&gt;</a>
                <a href="/player/{{player}}/set_trump/b">Blue&gt;</a>
                <a href="/player/{{player}}/set_trump/y">Yellow &gt;</a>
                -->
                <button onclick="setTrumpColor('r')">Red</button>
                <button onclick="setTrumpColor('g')">Green</button>
                <button onclick="setTrumpColor('b')">Blue</button>
                <button onclick="setTrumpColor('y')">Yellow</button>
                {% endif %}
            <!--
                <li>
                    <strong>Movie by IMDB code</strong><br>
                    <a href="/api/movie/tt0096754">GET /api/movie/{imdb_number}</a>
                </li>
                <li>
                    <strong>Top 10 Movies (by IMDB score)</strong><br>
                    <a href="/api/movie/top">GET /api/movie/top</a>
                </li>
                <li>
                    <strong>All genres</strong><br>
                    <a href="/api/movie/genre/all">GET /api/movie/genre/all</a>
                </li>
                <li>
                    <strong>Top movies for a given genres</strong><br>
                    <a href="/api/movie/genre/sci-fi">GET /api/movie/genre/{genre}</a>
                </li>
-->
            </ul>
            </p>

            <p class="disclaimer">
                Spam Bacon Sausage + Spam
                Spam Spam Spam Spam Spam
                  Spam Baked Beans Spam
                  Spam Spam + Spam

            </p>
        </div>


{% endblock %}