<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 && (routingService.app != 'ygopro')">
    <button (click)="startApp(routingService.app)" 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(routingService.app)" type="button" class="btn btn-secondary">游览本地文件</button>
    <button type="button" class="btn btn-secondary">联机</button>
</div>
<ygopro *ngIf="isInstalled && (routingService.app == 'ygopro')"></ygopro>

<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>

<button (click)="appsService.doTar()">DOTAR</button>
<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">
                        <button type="button" (click)="uninstall()">
                            {{'uninstall'|translate}}
                        </button>
                    </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">
    <div class="modal-dialog" role="document">
        <form id="install-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 id="submit" type="submit" [disabled]="!theForm.form.valid" class="btn btn-primary">安装</button>

            </div>
            <!--
            -->
        </form>
    </div>
</div>

