<!-- of-match-onePlayer -->
<article ng-if="vf.showOnePlayer" class="card oneplayer" >
    <header class="card-header">
        <h1 class="card-title">{{ 'ONEPLAYER' | translate }}</h1>
    </header>
    <section class="card-body card-body-padding">

        <!--Oneplayer Pre-->
        <div ng-if="vf.onePlayerPre" layout="row" layout-align="center" align="center" >

            <div class="oneplayer-image-wrapper">
                <div class="oneplayer-image">
                    <img class="oneplayer-default-image image-inactive" src="assets/images/ic_default_oneplayer.png"/>
                </div>
            </div>

            <div align="center" flex>
                <p>{{ 'ONEPLAYER_OPENS_SOON' | translate }}</p>
                <of-match-countdown ng-if="vf.showCountdown"
                                     kickoff="{{onePlayer.matchStatus.opensAt}}"
                                     simplified="true"></of-match-countdown>
            </div>
        </div>

        <!--Oneplayer Open-->
        <div ng-if="vf.onePlayerOpen">
            <!-- If no user vote and there is no votes already, we show the default oneplayer info -->
            <div ng-if="!vf.userVoted && !vf.votes" layout="row">
                <div class="oneplayer-image-wrapper" layout="column">
                    <div  class="oneplayer-image">
                        <img class="oneplayer-default-image" src="assets/images/ic_default_oneplayer.png"/>
                    </div>
                </div>

                <div class="oneplayer-name" layout="column">
                    <p>{{ 'ONEPLAYER_WHO' | translate }}</p>
                </div>

                <div layout="column" class="oneplayer-voting-button" layout-align="end" flex>
                    <p ng-click="openDialog($event)">{{ 'ONEPLAYER_PICK_NOW' | translate }}</p>
                </div>
            </div>

            <!-- If no user vote and there is some votes already, we show the info about the winning player -->
            <div ng-if="!vf.userVoted && vf.votes" layout="row">
                <div class="oneplayer-image-wrapper" layout="column">
                    <div class="oneplayer-image" style="background-image: url('{{ onePlayer.onePlayerTopVotes.imageSrc }}')">
                        <img class="oneplayer-image-mask" src="assets/images/oneplayer-circle-silver.png"/>
                    </div>
                </div>

                <div class="oneplayer-name" layout="column">
                    <p class="oneplayer-name-title">{{ 'ONEPLAYER_LEADER' | translate }}</p>
                    <p class="oneplayer-name-player">{{ onePlayer.onePlayerTopVotes.name }}</p>
                </div>
                <div class="oneplayer-votes" layout="column" layout-align="end">
                    <p>{{ onePlayer.onePlayerTopVotes.votes }} &#10004</p>
                </div>

                <div layout="column" class="oneplayer-voting-button" layout-align="end" flex>
                    <p ng-click="openDialog($event)">{{ 'ONEPLAYER_PICK_NOW' | translate }}</p>
                </div>
            </div>

            <!-- If user vote we show the info about the chosen player -->
            <div ng-if="vf.userVoted" layout="row">
                <div class="oneplayer-image-wrapper" layout="column">
                    <div class="oneplayer-image" style="background-image: url('{{ userVote.player.imageSrc }}')">
                        <img class="oneplayer-image-mask" src="assets/images/oneplayer-circle-silver.png"/>
                    </div>
                </div>

                <div class="oneplayer-name" layout="column">
                    <p class="oneplayer-name-title">{{ 'ONEPLAYER_PICKED' | translate }}</p>
                    <p class="oneplayer-name-player">{{ userVote.player.name }}</p>
                </div>
                <div class="oneplayer-votes" layout="column" layout-align="end">
                    <p>{{ userVote.votes }} &#10004</p>
                </div>

                <div layout="column" class="oneplayer-voting-button" layout-align="end" flex>
                    <p ng-click="openDialog($event)">{{ 'ONEPLAYER_ALL_RANKINGS' | translate }}</p>
                </div>
            </div>

        </div>

        <!-- Oneplayer Closed // We show the final result in case there is any vote -->
        <div ng-if="vf.onePlayerClosed" layout="row">

            <div class="oneplayer-image-wrapper" layout="column">
                <div class="oneplayer-image"
                     style="background-image: url('{{ onePlayer.onePlayerTopVotes.imageSrc }}')">
                    <img class="oneplayer-image-mask" src="assets/images/oneplayer-circle-gold.png"/>
                </div>
            </div>

            <div class="oneplayer-name">
                <p ng-if="!vf.userVoted"
                   class="oneplayer-name-title"
                   layout="row">{{ 'ONEPLAYER_WINNER' | translate }}</p>

                <p ng-if="vf.userVoted"
                   class="oneplayer-name-title"
                   layout="row">{{ 'ONEPLAYER_RIGHT' | translate }}</p>

                <p class="oneplayer-name-player">{{ onePlayer.onePlayerTopVotes.name }}</p>
            </div>
            <div class="oneplayer-votes" layout="column">
                <p>{{ onePlayer.onePlayerTopVotes.votes }} &#10004</p>
            </div>
        </div>

    </section>
</article>
