<h1>{{appsService.currentApp.name}}</h1>
<div *ngIf="!isInstalled">
    <div *ngIf="!appsService.getDownloadInfo(appsService.currentApp)">
        <button type="button" (click)="updateInstallConfig()" class="btn btn-primary" data-toggle="modal" data-target="#install-modal">安装
        </button>
        <button type="button" class="btn btn-secondary">导入</button>
        <!--<button type="button" class="btn btn-secondary">正版代购</button>-->
    </div>
    <div *ngIf="appsService.getDownloadInfo(appsService.currentApp)">
        <div *ngIf="appsService.getDownloadInfo(appsService.currentApp).status === 'install'">正在安装...</div>
        <div *ngIf="appsService.getDownloadInfo(appsService.currentApp).status === 'wait'">等待安装...</div>
        <progress *ngIf="appsService.getDownloadInfo(appsService.currentApp).status === 'active'" class="progress progress-striped progress-animated" value="{{appsService.getDownloadInfo(appsService.currentApp).progress}}" max="100"></progress>
    </div>
</div>
<div *ngIf="isInstalled && (appsService.currentApp.id != 'ygopro')">
    <button (click)="startApp(appsService.currentApp)" type="button" class="btn btn-primary">运行</button>
    <button type="button" data-toggle="modal" data-target="#settings-modal" class="btn btn-secondary">设置</button>
    <!--<button (click)="appsService.browse(appsService.currentApp)" type="button" class="btn btn-secondary">游览本地文件</button>-->

    <div id="network" *ngIf="appsService.currentApp.network && appsService.currentApp.network.protocol == 'maotama'">
        <div class="input-group">
            <input *ngIf="appsService.connections.get(appsService.currentApp)" [value]="appsService.connections.get(appsService.currentApp).address || 'Loading...'" readonly type="text" class="form-control" aria-label="Text input with dropdown button" title="address">
            <div class="input-group-btn">
                <button *ngIf="!appsService.connections.get(appsService.currentApp)" (click)="appsService.network(appsService.currentApp, appsService.currentApp.network.servers[0])" type="button" class="btn btn-secondary">
                    联机
                </button>
                <button *ngIf="appsService.connections.get(appsService.currentApp)" (click)="copy(appsService.connections.get(appsService.currentApp).address)" [disabled]="!appsService.connections.get(appsService.currentApp).address" type="button" class="btn btn-secondary">
                    复制
                </button>
                <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="height: 38px;">
                    <span class="sr-only">Toggle Dropdown</span>
                </button>
                <div class="dropdown-menu" [class.dropdown-menu-right]="appsService.connections.get(appsService.currentApp)">
                    <h6 class="dropdown-header">选择服务器</h6>
                    <a *ngFor="let server of appsService.currentApp.network.servers" (click)="appsService.network(appsService.currentApp, server)" class="dropdown-item" href="#">{{server.id}}</a>
                </div>
            </div>
        </div>
    </div>
</div>
<ygopro *ngIf="isInstalled && (appsService.currentApp.id == 'ygopro')"></ygopro>

<br>

<h2 *ngIf="news.length">新闻</h2>

<div id="news" *ngFor="let item of news">
    <h3>{{item.title}}</h3>
    <p>{{item.text}}</p>
    <a *ngIf="item.url" [href]="item.url">了解更多</a>
</div>

<!--<div *ngIf="friends">
    <h2>好友</h2>
    <p>好友信息</p>
    <br>
</div>

<div *ngIf="achievement">
    <h2>成就</h2>
    <p>成就信息</p>
    <br>
</div>-->

<div *ngIf="mods && mods.length">
    <h2>Mods</h2>
    <table class="table table-striped">
        <thead class="thead-inverse">
        <tr>
            <th>#</th>
            <th>名称</th>
            <th>类型</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr *ngFor="let mod of mods; let i = index">
            <th scope="row">{{i + 1}}</th>
            <td>{{'app.' + mod.id + '.name' | translate}}</td>
            <td>{{mod.type}}</td>
            <td *ngIf="checkInstall(mod.id)">
                <button type="button" class="btn btn-danger btn-sm">卸载</button>
            </td>
            <td *ngIf="!checkInstall(mod.id)">
                <button *ngIf="!appsService.getDownloadInfo(mod.id)" (click)="install(mod.id)" type="button" class="btn btn-primary btn-sm">安装
                </button>
                <progress *ngIf="appsService.getDownloadInfo(mod.id) && appsService.getDownloadInfo(mod.id).status === 'active'" class="progress progress-striped progress-animated" value="{{appsService.getDownloadInfo(mod.id).progress}}" max="100"></progress>
                <div *ngIf="appsService.getDownloadInfo(mod.id) && appsService.getDownloadInfo(mod.id).status === 'wait'">
                    等待安装...
                </div>
                <div *ngIf="appsService.getDownloadInfo(mod.id) && appsService.getDownloadInfo(mod.id).status === 'install'">
                    正在安装...
                </div>
            </td>
        </tr>
        </tbody>
    </table>
</div>

<div *ngIf="isInstalled">
    <h2>本地文件</h2>
    <button (click)="appsService.browse(appsService.currentApp)" type="button" class="btn btn-secondary">浏览本地文件</button>
    <button (click)="uninstall()" type="button" class="btn btn-secondary">{{'uninstall'|translate}}</button>
</div>

<div class="modal fade" id="settings-modal" tabindex="-1">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">{{'settings'|translate}}</h4>
                <ul class="nav nav-tabs">
                    <li class="nav-item">
                        <a class="nav-link active" data-toggle="tab" href="#general"> {{'general'|translate}} </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-toggle="tab" href="#updates"> {{'updates'|translate}} </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-toggle="tab" href="#local-files"> {{'local files'|translate}} </a>
                    </li>
                </ul>
            </div>
            <div class="modal-body">
                <div class="tab-content">
                    <div id="general" role="tabpanel" class="tab-pane fade active">

                    </div>
                    <div id="updates" role="tabpanel" class="tab-pane fade">

                    </div>
                    <div id="local-files" role="tabpanel" class="tab-pane fade">
                        <div class="list-inline">
                            <button type="button" [disabled]="!isInstalled" (click)="uninstall()">
                                {{'uninstall'|translate}}
                            </button>
                            <i *ngIf="uninstalling" class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></i>
                            <span class="sr-only">Loading...</span>
                        </div>
                    </div>
                </div>
            </div>
            <div>

            </div>
        </div>
    </div>
</div><!-- Modal -->
<div class="modal fade" id="install-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" *ngIf="installConfig">
    <div class="modal-dialog" role="document">
        <form id="install-form" class="modal-content" (ngSubmit)="install()" #theForm="ngForm">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">{{'install'|translate}} {{name}}</h4>
            </div>
            <div class="modal-body">
                <p>即将开始安装 {{name}}</p>
                <!-- 安装位置选择只在 windows 下存在, 为了方便调试暂时不加ngif -->
                <h4>{{'install_path'|translate}}</h4>
                <div class="form-group">
                    <select class="form-control" name="installPath" [(ngModel)]="installConfig.installPath" title="path">
                        <option *ngFor="let library of settingsService.getLibraries()" value="{{library['path']}}">
                            {{ library['path']}}
                        </option>
                    </select>
                </div>
                <h4>{{'shortcut'|translate}}</h4>
                <div class="checkbox">
                    <label>
                        <input type="checkbox" name="application" [(ngModel)]="installConfig.createShortcut"> {{'create_shortcut'|translate}}
                    </label>
                </div>
                <div class="checkbox">
                    <label>
                        <input type="checkbox" name="desktop" [(ngModel)]="installConfig.createDesktopShortcut"> {{'create_desktop_shortcut'|translate}}
                    </label>
                </div>
                <h4>{{'additions'|translate}}</h4>
                <div *ngFor="let reference of installConfig.references">
                    <label>
                        <input type="checkbox" [(ngModel)]="reference.id" name="references" value="{{reference.id}}"> {{reference.name}}
                    </label>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">{{'cancel'|translate}}</button>
                <button id="submit" type="submit" [disabled]="!theForm.form.valid" class="btn btn-primary">
                    {{'install' |translate}}
                </button>
            </div>
        </form>
    </div>
</div>
