<h1>{{'app.' + currentApp.id + '.name' | translate}}</h1>
<h2>{{appsService._aa}}</h2>
<div *ngIf="!isInstalled">
    <div *ngIf="!appsService.getDownloadInfo(routingService.app)">
        <button type="button" 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(routingService.app)">
        <div *ngIf="appsService.getDownloadInfo(routingService.app).status === 'install'">正在安装...</div>
        <div *ngIf="appsService.getDownloadInfo(routingService.app).status === 'wait'">等待安装...</div>
        <progress *ngIf="appsService.getDownloadInfo(routingService.app).status === 'active'"
                  class="progress progress-striped progress-animated"
                  value="{{appsService.getDownloadInfo(routingService.app).progress}}" max="100">
        </progress>
    </div>
</div>
<div *ngIf="isInstalled">
    <button (click)="startApp(routingService.app)" type="button" class="btn btn-primary">运行</button>
    <button type="button" class="btn btn-secondary">设置</button>
    <button (click)="openDir(routingService.app)" type="button" class="btn btn-secondary">游览本地文件</button>
    <button type="button" class="btn btn-secondary">联机</button>
</div>

<br>

<h2>新闻</h2>

<p *ngIf="!news">没有新闻</p>
<div *ngIf="news">
    <div class="list-group">
        <a *ngFor="let item of news" href="{{item.url}}" class="list-group-item">{{item.title}}</a>
    </div>

</div>

<br>

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

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

<div *ngIf="mods">
    <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>

<!== DEBUG -->
<pre class="debug">
{{appsService.downloadsInfo | json}}
{{appsService.installConfig | json}}
{{appsService.tarQueue | json}}
{{appsService.waitInstallQueue | json}}
</pre>
<button (click)="appsService.doTar()" >DOTAR</button>

<!-- Modal -->
<div class="modal fade" id="install-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
     aria-hidden="true">
    <div class="modal-dialog" role="document">
        <form class="modal-content" (ngSubmit)="installSubmit(theForm)" #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">安装 {{name}}</h4>
            </div>
            <div class="modal-body">
                <p>即将开始安装 {{name}}</p>
                <!-- 安装位置选择只在 windows 下存在, 为了方便调试暂时不加ngif -->
                <h4>安装位置</h4>
                <div class="form-group">
                    <div class="input-group">
                        <input type="text" [(ngModel)]="appsService.installConfig.installDir" name="installDir" class="form-control" placeholder="安装位置">
                        <span class="input-group-btn">
                            <button (click)="selectDir()" class="btn btn-secondary" type="button">浏览</button>
                        </span>
                    </div>
                </div>
                <h4>快捷方式</h4>
                <div class="checkbox">
                    <label>
                        <input type="checkbox" [(ngModel)]="appsService.installConfig.shortcut.application" name="application">
                        创建应用程序快捷方式
                    </label>
                </div>
                <div class="checkbox">
                    <label>
                        <input type="checkbox" [(ngModel)]="appsService.installConfig.shortcut.desktop" name="desktop">
                        创建桌面快捷方式
                    </label>
                </div>
                <h4>附加内容</h4>
                <div *ngFor="let mod of currentApp.references[platform]">
                    <label>
                        <input type="checkbox" [(ngModel)]="appsService.installConfig.mods[mod.id]" name="{{mod.id}}"
                               [disabled]="['dependency', 'runtime'].includes(mod.type)">
                        {{appsService.searchApp(mod.id).name[appsService.searchApp(mod.id).locales[0]]}}
                    </label>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                <button type="submit" [disabled]="!theForm.form.valid" class="btn btn-primary">安装</button>
            </div>
            <!--
            -->
        </form>
    </div>
</div>
