<div *ngIf="!matching" id="action">
    <button [disabled]="!appsService.allReady(app)" (click)="request_match('athletic')" type="button" class="btn btn-primary btn-sm">
        <i class="fa fa-play" aria-hidden="true"></i> <span i18n>竞技匹配</span></button>
    <button i18n [disabled]="!appsService.allReady(app)" (click)="request_match('entertain')" type="button" class="btn btn-secondary btn-sm">娱乐匹配</button>
    <button i18n [disabled]="!appsService.allReady(app)" type="button" class="btn btn-secondary btn-sm" data-toggle="modal" data-target="#game-list-modal">自定义游戏</button>
    <button i18n [disabled]="!appsService.allReady(app)" type="button" class="btn btn-secondary btn-sm" data-toggle="modal" data-target="#game-create-windbot">单人模式</button>
    <button i18n [disabled]="!appsService.allReady(app)" type="button" class="btn btn-secondary btn-sm" data-toggle="modal" data-target="#game-replay-modal">观战录像</button>
</div>

<!-- 匹配中 -->
<div *ngIf="matching" id="match-time" class="input-group input-group-sm">
    <span class="input-group-addon">
        <i class="fa fa-futbol-o fa-spin" aria-hidden="true"></i>
        <span i18n *ngIf="matching_arena == 'athletic'">竞技匹配</span>
        <span i18n *ngIf="matching_arena == 'entertain'">娱乐匹配</span>
    </span>
    <span class="input-group-addon"><span i18n>预计时间</span> 03:00</span><span class="input-group-addon"><span i18n>实际时间</span> {{match_time}}</span>
    <span class="input-group-btn"><button i18n class="btn btn-secondary" type="button" [disabled]="!match_cancelable" (click)="cancel_match()">取消</button></span>
</div>

<div class="input-group input-group-sm">
    <label i18n class="input-group-addon" id="basic-addon1">卡组</label>
    <select class="form-control form-control-sm" id="exampleSelect1" name="deck" [(ngModel)]="current_deck">
        <option *ngFor="let deck of decks" [ngValue]="deck">{{deck}}</option>
    </select> <span class="input-group-btn">
        <button id="edit_deck_button" i18n [disabled]="!appsService.allReady(app)" class="btn btn-secondary btn-sm" (click)="edit_deck(current_deck)">编辑</button>
    </span>
</div>

<div class="modal fade" id="game-create-windbot" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 i18n class="modal-title">单人模式</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <label i18n>选择对手</label>
                <div id="windbot" class="list-group">
                    <a i18n href="#" class="list-group-item" (click)="join_windbot()">随机</a>
                    <a *ngFor="let name of windbot" href="#" class="list-group-item" (click)="join_windbot(name)">{{name}}</a>
                </div>
            </div>
            <div class="modal-footer">
                <button i18n type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="game-list-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content flex-row">

            <div id="game-list">
                <div i18n class="p-2" *ngIf="rooms_loading">正在读取游戏列表...</div>
                <div i18n class="p-2" *ngIf="!rooms_loading && this.rooms.length === 0">现在没有等待中的游戏，可以自行创建一个房间或者去匹配</div>
                <table *ngIf="!this.rooms_loading && this.rooms.length > 0" class="table table-striped table-hover">
                    <thead>
                    <tr>
                        <th i18n class="title">游戏标题</th>
                        <th i18n class="users">玩家</th>
                        <th i18n class="mode">决斗模式</th>
                        <th i18n class="extra">额外选项</th>
                    </tr>
                    </thead>
                    <tbody>

                    <tr *ngFor="let room of rooms" class="room" (click)="join_room(room)">
                        <td class="title">{{room.title}}</td>
                        <td class="users">
                            <img *ngFor="let user of room.users" class="avatar rounded" [src]="'https://ygobbs.com/user_avatar/ygobbs.com/' + user.username + '/25/1.png'" data-toggle="tooltip" data-placement="bottom" [title]="user.username">
                        </td>
                        <td class="mode">
                            <span i18n *ngIf="room.options.mode === 0">单局模式</span>
                            <span i18n *ngIf="room.options.mode === 1">比赛模式</span>
                            <span i18n *ngIf="room.options.mode === 2">TAG</span>
                        </td>
                        <td class="extra">
                            <span *ngIf="room.options.rule != default_options.rule">{{{'0': 'OCG', '1': 'TCG', '2': 'O/T', '3': '专有卡禁止'}[room.options.rule]}}</span>
                            <span i18n *ngIf="room.options.start_lp != default_options.start_lp">{{room.options.start_lp}} LP</span>
                            <span i18n *ngIf="room.options.start_hand != default_options.start_hand">{{room.options.start_hand}} 初始</span>
                            <span i18n *ngIf="room.options.draw_count != default_options.draw_count">{{room.options.draw_count}} 抽卡</span>
                            <span i18n *ngIf="room.options.enable_priority != default_options.enable_priority">旧规则</span>
                            <span i18n *ngIf="room.options.no_check_deck != default_options.no_check_deck">不检查</span>
                            <span i18n *ngIf="room.options.no_shuffle_deck != default_options.no_shuffle_deck">不洗卡</span>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>


            <form (submit)="create_room(room)">
                <h3 i18n>创建房间</h3>
                <div class="form-group">
                    <label i18n for="game-create-title">游戏标题</label>
                    <input type="text" maxlength="12" class="form-control form-control-sm" id="game-create-title" name="title" [(ngModel)]="room.title" required>
                    <small id="emailHelp" class="form-text text-muted">最多 12 个字</small>
                </div>
                <div class="form-group">
                    <label i18n for="game-create-rule">卡片允许</label>
                    <select class="form-control form-control-sm" id="game-create-rule" name="rule" [(ngModel)]="room.options.rule">
                        <option i18n value="0">OCG</option>
                        <option i18n value="1">TCG</option>
                        <option i18n value="2">OCG & TCG</option>
                        <option i18n value="3">专有卡禁止</option>
                    </select>
                </div>
                <div class="form-group">
                    <label i18n for="game-create-rule">决斗模式</label>
                    <select class="form-control form-control-sm" id="game-create-mode" name="mode" [(ngModel)]="room.options.mode">
                        <option i18n value="0">单局模式</option>
                        <option i18n value="1">比赛模式</option>
                        <option i18n value="2">TAG</option>
                    </select>
                </div>

                <fieldset>
                    <legend i18n class="col-form-legend">额外选项</legend>
                    <div class="row">
                        <label i18n for="game-create-start-lp" class="col-sm-6 col-form-label">初始 LP</label>
                        <div class="col-sm-6">
                            <input type="number" value="8000" min="1" max="65536" class="form-control form-control-sm" id="game-create-start-lp" name="start_lp" [(ngModel)]="room.options.start_lp">
                        </div>
                    </div>
                    <div class="row">
                        <label i18n for="game-create-start-hand" class="col-sm-6 col-form-label">初始手牌数</label>
                        <div class="col-sm-6">
                            <input type="number" value="5" min="0" max="16" class="form-control form-control-sm" id="game-create-start-hand" name="start_hand" [(ngModel)]="room.options.start_hand">
                        </div>
                    </div>
                    <div class="row">
                        <label i18n for="game-create-draw-count" class="col-sm-6 col-form-label">每回合抽卡</label>
                        <div class="col-sm-6">
                            <input type="number" value="1" min="0" max="16" class="form-control form-control-sm" id="game-create-draw-count" name="draw_count" [(ngModel)]="room.options.draw_count">
                        </div>
                    </div>
                    <div>
                        <input id="enable_priority" name="enable_priority" [(ngModel)]="room.options.enable_priority" type="checkbox">
                        <label i18n for="enable_priority">旧规则</label>
                    </div>
                    <div>
                        <input id="no_check_deck" name="no_check_deck" [(ngModel)]="room.options.no_check_deck" type="checkbox">
                        <label i18n for="no_check_deck">不检查卡组</label>
                    </div>
                    <div>
                        <input id="no_shuffle_deck" name="no_shuffle_deck" type="checkbox" [(ngModel)]="room.options.no_shuffle_deck">
                        <label i18n for="no_shuffle_deck">不洗切卡组</label>
                    </div>
                </fieldset>

                <div id="game-create-actions">
                    <button i18n type="submit" class="btn btn-sm btn-primary">创建房间</button>
                </div>
            </form>
            <button id="game-list-close" type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
    </div>
</div>


<div class="modal fade" id="game-replay-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <!--<div class="modal-header">-->
            <!--<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>-->
            <!--<button type="button" class="close" data-dismiss="modal" aria-label="Close">-->
            <!--<span aria-hidden="true">&times;</span>-->
            <!--</button>-->
            <!--</div>-->
            <div class="modal-body">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <ul class="nav nav-tabs" role="tablist">
                    <!--<li class="nav-item">-->
                    <!--<a class="nav-link" data-toggle="tab" href="#home" role="tab">推荐</a>-->
                    <!--</li>-->
                    <li class="nav-item">
                        <a i18n class="nav-link active" data-toggle="tab" href="#game-replay-watch" role="tab">观战</a>
                    </li>
                    <!--<li class="nav-item">-->
                    <!--<a class="nav-link" data-toggle="tab" href="#home" role="tab">收藏的录像</a>-->
                    <!--</li>-->
                    <li class="nav-item">
                        <a i18n class="nav-link" data-toggle="tab" href="#game-replay-local" role="tab">本地录像</a>
                    </li>
                    <li *ngIf="settingsService.getLocale().startsWith('zh')" class="nav-item">
                        <a class="nav-link" data-toggle="tab" href="#game-replay-bilibili" role="tab">哔哩哔哩</a>
                    </li>
                    <!--<li class="nav-item">-->
                    <!--<a class="nav-link" data-toggle="tab" href="#game-replay-youtube" role="tab">YouTube</a>-->
                    <!--</li>-->
                </ul>
                <div class="tab-content">
                    <div class="tab-pane active scroll" id="game-replay-watch" role="tabpanel">
                        <table class="table table-striped table-hover">
                            <thead>
                            <tr>
                                <th class="title">
                                    <span i18n>游戏模式</span>
                                    <div id="watch-filter" class="dropdown">
                                        <button i18n class="btn btn-secondary dropdown-toggle btn-sm" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">筛选</button>
                                        <div class="dropdown-menu">
                                            <h6 i18n class="dropdown-header">匹配</h6>
                                            <div class="form-check dropdown-item">
                                                <input id="filter-athletic" type="checkbox" class="form-check-input" [(ngModel)]="replay_rooms_filter.athletic" (change)="refresh_replay_rooms()">
                                                <label i18n for="filter-athletic" class="form-check-label">竞技匹配</label>
                                            </div>
                                            <div class="form-check dropdown-item">
                                                <input id="filter-entertain" type="checkbox" class="form-check-input" [(ngModel)]="replay_rooms_filter.entertain" (change)="refresh_replay_rooms()">
                                                <label i18n for="filter-entertain" class="form-check-label">娱乐匹配</label>
                                            </div>
                                            <h6 i18n class="dropdown-header">自定义游戏</h6>
                                            <div class="form-check dropdown-item">
                                                <input id="filter-single" type="checkbox" class="form-check-input" [(ngModel)]="replay_rooms_filter.single" (change)="refresh_replay_rooms()">
                                                <label i18n for="filter-single" class="form-check-label">单局模式</label>
                                            </div>
                                            <div class="form-check dropdown-item">
                                                <input id="filter-match" type="checkbox" class="form-check-input" [(ngModel)]="replay_rooms_filter.match" (change)="refresh_replay_rooms()">
                                                <label i18n for="filter-match" class="form-check-label">比赛模式</label>
                                            </div>
                                            <div class="form-check dropdown-item">
                                                <input id="filter-tag" type="checkbox" class="form-check-input" [(ngModel)]="replay_rooms_filter.tag" (change)="refresh_replay_rooms()">
                                                <label i18n for="filter-tag" class="form-check-label">TAG</label>
                                            </div>
                                            <h6 i18n class="dropdown-header">单人模式</h6>
                                            <div class="form-check dropdown-item">
                                                <input id="filter-windbot" type="checkbox" class="form-check-input" [(ngModel)]="replay_rooms_filter.windbot" (change)="refresh_replay_rooms()">
                                                <label i18n for="filter-windbot" class="form-check-label">单人模式</label>
                                            </div>
                                        </div>
                                    </div>
                                </th>
                                <th i18n class="users">游戏标题</th>
                                <th i18n class="mode">玩家</th>
                                <th i18n class="extra">详情</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr *ngFor="let room of replay_rooms_show" class="room" (click)="join_room(room)">
                                <td class="mode">
                                    <span i18n *ngIf="room.id.startsWith('AI#')">单人模式</span>
                                    <span i18n *ngIf="room.arena === 'athletic'">竞技匹配</span>
                                    <span i18n *ngIf="room.arena === 'entertain'">娱乐匹配</span>
                                    <span i18n *ngIf="!(room.arena || room.id.startsWith('AI#')) && room.options.mode === 0">单局模式</span>
                                    <span i18n *ngIf="!(room.arena || room.id.startsWith('AI#')) && room.options.mode === 1">比赛模式</span>
                                    <span i18n *ngIf="!(room.arena || room.id.startsWith('AI#')) && room.options.mode === 2">TAG</span>
                                </td>
                                <td class="title">
                                    <span i18n *ngIf="room.arena || room.id.startsWith('AI#')">{{room.users[0] && room.users[0].username}} 跟 {{room.users[1] && room.users[1].username}} 的决斗</span>
                                    <span *ngIf="!(room.arena || room.id.startsWith('AI#'))">{{room.title}}</span>
                                </td>
                                <td class="users">
                                    <img *ngFor="let user of room.users" class="avatar rounded" [src]="'https://ygobbs.com/user_avatar/ygobbs.com/' + user.username + '/25/1.png'" data-toggle="tooltip" data-placement="bottom" [title]="user.username">
                                </td>
                                <td class="extra">
                                    <span *ngIf="!(room.arena || room.id.startsWith('AI#'))">
                                        <span *ngIf="room.options.rule != default_options.rule">{{{'0': 'OCG', '1': 'TCG', '2': 'O/T', '3': '专有卡禁止'}[room.options.rule]}}</span>
                                        <span i18n *ngIf="room.options.start_lp != default_options.start_lp">{{room.options.start_lp}} LP</span>
                                        <span i18n *ngIf="room.options.start_hand != default_options.start_hand">{{room.options.start_hand}} 初始</span>
                                        <span i18n *ngIf="room.options.draw_count != default_options.draw_count">{{room.options.draw_count}} 抽卡</span>
                                        <span i18n *ngIf="room.options.enable_priority != default_options.enable_priority">旧规则</span>
                                        <span i18n *ngIf="room.options.no_check_deck != default_options.no_check_deck">不检查</span>
                                        <span i18n *ngIf="room.options.no_shuffle_deck != default_options.no_shuffle_deck">不洗卡</span>
                                    </span>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="tab-pane" id="game-replay-local" role="tabpanel">
                        <div class="list-group">
                            <a *ngFor="let replay of replays" class="list-group-item list-group-item-action" (click)="watch_replay(replay)">{{replay}}</a>
                        </div>
                    </div>
                    <div *ngIf="settingsService.getLocale().startsWith('zh')" class="tab-pane" id="game-replay-bilibili" role="tabpanel">
                        <webview #bilibili src="http://m.bilibili.com/search.html?keyword=YGOPro" (did-finish-load)="bilibili_loaded()" (will-navigate)="bilibili_navigate($event)"></webview>
                    </div>
                    <!--<div class="tab-pane" id="game-replay-youtube" role="tabpanel">-->
                    <!--<webview #youtube src="https://m.youtube.com/results?search_query=YGOPro" (did-finish-load)="youtube_loaded()" (will-navigate)="youtube_navigate($event)"></webview>-->
                    <!--</div>-->
                </div>
            </div>
            <!--<div class="modal-footer">-->
            <!--<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>-->
            <!--&lt;!&ndash;<button type="button" class="btn btn-primary">Save changes</button>&ndash;&gt;-->
            <!--</div>-->
        </div>
    </div>
</div>