{{if canPlay}}

<div id="pasapalabra" class="container">
    <div class="content" {{if showResults}} style="display: none" {{/if}}>
        <div id="plhTimer" class="timer {{if timeCounter <= 0}} timeEnded {{else timeCounter <= 20000}} timeEnding {{/if}}"><div id="tmplTime" class="inner {{if gameFinished}} timeEnded {{/if}}">{{if gameFinished}}<span>0''</span>{{/if}}</div></div>
        <ul class="letters circle">
            <!--<![endif]-->
            {{for categories ~selfQuestionScope = questionScope}}
            <li class="element letter letter-{{:name}} {{if gained}} success {{else gained === false}} fail {{/if}} {{if name == ~selfQuestionScope.currentCategoryName}} current {{/if}}">{{:name}}</li>
            {{/for}}
        </ul>
        <div class="item question {{if gameFinished}} disabled {{/if}}">
            <div class="current-letter">
                {{:questionScope.currentCategoryName}}
            </div>
            {{if questionScope.currentQuestion}}
            <h2 class="title">
                {{:questionScope.currentQuestion.title}}
            </h2>
            {{/if}}
            <div class="btn-container">
                <input id="txtAnswer" class="answer" placeholder="respuesta" value="{{:answer}}" onblur="QuodemPasapalabra.pasapalabra.controllers.main.setUserAnswer(this);" />
                <input class="btnPasapalabra btn" type="button" value="Pasapalabra" onclick="QuodemPasapalabra.pasapalabra.controllers.main.nextQuestion();">
                <input class="btnSend btn" type="button" value="Enviar" onclick="QuodemPasapalabra.pasapalabra.controllers.main.sendAnswer();">
            </div>
            <br />
        </div>
    </div>

    {{if gameFinished && !showResults}}
    <div id="btnContinue" class="btnContinue" style="display:  block;" onclick="QuodemPasapalabra.pasapalabra.controllers.main.showResults();">
        Continuar
    </div>
    {{/if}}

    {{if showResults}}
    <div id="resultados" class="result-container">
        <div class="resutl-header"></div>
        <div class="row-fila">
            <h2 class="result-title">
                {{if totalPoints > 0}}
                ¡¡¡Enhorabuena {{:user.fullName}}!!!
                {{else}}
                Sigue intentándolo {{:user.fullName}}! Seguro que a la próxima consigues más estrellas!
                {{/if}}
            </h2>
        </div>
        <div class="row-fila">
            <h3 class="result-title">Has acertado:</h3>
            <span class="points">{{:totalPoints}} palabras</span>
        </div>
    </div>
    {{/if}}
</div>

{{else}}
<div><p>Ya has jugado el máximo número de veces.</p></div>
{{/if}}