<!--
    Component informations:
    - id: LB
    - name: LeaderBoard
-->
<section class="component-LB" data-class="RANKING">
    <div class="component-LB-container">
        <header class="component-LB-header">
            <div class="component-LB-header-content">
                <div class="component-LB-header-title">SEMAINE</div>
                <div class="component-LB-header-period">Du <span class="start-period">XX/XX/XXXX</span> au <span class="end-period">XX/XX/XXXX</span></div>
                <div class="component-LB-header-controls">
                    <div class="component-LB-header-controls-arrow component-LB-header-controls-arrow--prev js-prev">
                        <svg>
                            <use xlink:href="img/sprites/sprite.svg#arrow-bottom"></use>
                        </svg>
                    </div>
                    <div class="component-LB-header-controls-arrow component-LB-header-controls-arrow--next js-current inactif">
                        <svg>
                            <use xlink:href="img/sprites/sprite.svg#arrow-bottom"></use>
                        </svg>
                    </div>
                </div>
            </div>
        </header>
        <div class="component-LB-menu">
            <form action="" class="js-form">
                <div class="component-LB-menu-search">
                    <label class="component-LB-menu-search-field textfield textfield--icon textfield--floating textfield--rounded">
                        <input type="text" class="textfield-input js-input-search" placeholder="PSEUDONYME">
                    <span class="textfield-icon textfield-icon--fill">
                        <svg>
                            <use xlink:href="img/sprites/sprite.svg#icon-search"></use>
                        </svg>
                    </span>
                    </label>
                    <button class="component-LB-menu-search-submit button-golden" type="submit">VOIR</button>
                </div>
            </form>
            <div class="component-LB-menu-share">
                <div class="component-LB-menu-share-label">PARTAGE</div>
                <div class="component-LB-menu-share-links">
                    <a class="component-LB-menu-share-links-item" href="#" target="_blank">
                        <img src="img/components/LB/icon.png" alt="icon">
                    </a>
                    <a class="component-LB-menu-share-links-item" href="#" target="_blank">
                        <img src="img/components/LB/icon.png" alt="icon">
                    </a>
                    <a class="component-LB-menu-share-links-item" href="#" target="_blank">
                        <img src="img/components/LB/icon.png" alt="icon">
                    </a>
                </div>
            </div>
        </div>
        <div class="component-LB-grid">
            <table class="component-LB-grid-content js-ranking-result">
                
            </table>
            <script type="text/template" id="casino-ranking-result">
                <tr class="component-LB-grid-row">
                    <td class="component-LB-grid-cell" data-name="rank">
                        <div class="component-LB-grid-cell-content">{{classement}}</div>
                    </td>
                    <td class="component-LB-grid-cell" data-name="player">
                        <div class="component-LB-grid-cell-content">{{pseudo}}</div>
                    </td>
                    <td class="component-LB-grid-cell" data-name="evolution" data-evolution="{{progression}}">
                        <div class="component-LB-grid-cell-content">
                            <div class="component-LB-grid-icon">
                                <svg>
                                    <use xlink:href="img/sprites/sprite.svg#icon-arrow-2"></use>
                                </svg>
                            </div>
                        </div>
                    </td>
                    <td class="component-LB-grid-cell" data-name="points">
                        <div class="component-LB-grid-cell-content component-LB-grid-cell-content--numeric">
                            <span>{{bankroll}}</span>
                            <div class="component-LB-grid-icon">
                                <img src="img/components/LB/icon-points.png" alt="">
                            </div>
                        </div>
                    </td>
                </tr>
            </script>
            <script type="text/template" id="casino-ranking-pagination">
                <a class="component-LB-grid-pagination-pages-item js-pagination-item {{active}}" href="#" data-index="{{index}}">{{index}}</a>
            </script>
            <script type="text/template" id="casino-ranking-pagination-skip">
                <span class="component-LB-grid-pagination-pages-item js-pagination-item">...</span>
            </script>
                <div class="component-LB-grid-pagination js-pagination">
                <a class="component-LB-grid-pagination-button component-LB-grid-pagination-button--prev js-pagination-item" href="#" data-index="prev">Précédent</a>
                <div class="component-LB-grid-pagination-pages js-pagination-wrapper">
<!--                    <a class="component-LB-grid-pagination-pages-item is-active" href="#">1</a>-->
<!--                    <a class="component-LB-grid-pagination-pages-item" href="#">2</a>-->
<!--                    <a class="component-LB-grid-pagination-pages-item" href="#">3</a>-->
<!--                    <span class="component-LB-grid-pagination-pages-ellipsis">...</span>-->
<!--                    <a class="component-LB-grid-pagination-pages-item" href="#">1000</a>-->
                </div>
                <a class="component-LB-grid-pagination-button component-LB-grid-pagination-button--next js-pagination-item" href="#" data-index="next">Suivant</a>
            </div>
        </div>
    </div>
</section>