{include:header.tpl}
{if:friend.id}<div id="friendurl">URL for the friend: <a href="{:host}{:prefix}/{:friend.id}">{:host}{:prefix}/{:friend.id}</a></div>{endif}
<div id="info">{:me.name}, score: <span id="score">{:score}/{:turns}</span>{if:percent}, percent: <span id="percent">{:percent}%</span>{endif}, turn: <span id="turn">{:turn}</span>, skipped: <span id="skips">{:skips}</span></div>
<div id="word">
<h1>{:word}</h1>
<small>{:wordSource}</small>
</div>

{if:win}
<div id="win">Answers are equal. You win!</div>
{endif}
{if:lose}
<div id="lose">Answers are different. You lose...</div>
{endif}
{if:skipped}
<div id="skipped">Word was skipped</div>
{endif}

{if:waiting}
    <div class="waiting">waiting for the friend</div>
{else}{if:selected}
    <form id="ready" method="POST" action="{:prefix}/{:me.id}/ready">
    <input type="text" name="word" autocomplete="off" placeholder="here you may suggest your word for the next turn" size=40 value="" />
    <input type="submit" name="submit" value="next turn" />
    </form>
{endif}{endif}

<div id="debug">my selection: {:me.selection}, friend's selection: {:friend.selection}</div>

<div id="cards">{loop:cards::card}
<form class="card{if:card.my} myCard{endif}{if:card.friends} friendsCard{endif}" method="POST" action="{:prefix}/{:me.id}/select/{:card.index}" id="fi{:card.index}" >
{if:me.selected}<img src="{:cardsPrefix}/{:card.name}" />{else}<img class="top" src="{:cardsPrefix}/{:card.name}" id="i{:card.index}" /><input class="bottom" type="submit" value="select" />{endif}
</form>
{endloop}</div>

<hr />
<div id="logo"><a href="{:prefix}">back to start page</a></div>

<script>
    function processCard(e) {
        e.style.cursor = "pointer";
        e.onclick = function() { document.getElementById("f" + e.id).submit(); }
    }
    var l = document.getElementsByClassName("top");
    for(var i = 0; i < l.length; i++)
        if (l[i].tagName == "IMG") processCard(l[i]);
</script>

{include:footer.tpl}