<h1>{{'app.' + currentApp.id + '.name' | translate}}</h1>
<h2>{{appsService._aa}}</h2>
<div *ngIf="!isInstalled">
    <div *ngIf="!appsService.getDownloadInfo(routingService.app)">
        <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(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 *ngIf="news">新闻</h2>

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

<!--<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
        <li *ngFor="let item of news; let index = index;" data-target="#carousel-example-generic" [data-slide-to]="index" [class.active]="index == 0"></li>
    </ol>
    <div class="carousel-inner" role="listbox">
        <div *ngFor="let item of news; let index = index;" class="carousel-item" [class.active]="index == 0">
            <img [src]="item.image" [alt]="item.title">
            <div class="carousel-caption">
                <h3>{{item.title}}</h3>
                <p>{{item.text}}</p>
            </div>
        </div>
    </div>
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
        <span class="icon-prev" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
        <span class="icon-next" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>-->


<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">
    <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(routingService.app)" 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">
    <div class="modal-dialog" role="document">
        <form id="install-form" class="modal-content" (ngSubmit)="installSubmit()" #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">
                        <option *ngFor="let library of settings.getLibraries()" [selected]="library['default']">
                            {{ 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>
