{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}</span>, turn: <span id="turn">{:turn}</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: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}">
<img src="{:cardsPrefix}/{:card.name}" />
{if:me.selected}{else}<br /><input type="submit" value="select" />{endif}
</form>
{endloop}</div>

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

{include:footer.tpl}