<h1>{{currentApp.name}}</h1>
<!--应用未安装-->
<div class="actions" *ngIf="!currentApp.isInstalled()">
    <button i18n type="button" class="btn btn-primary" data-toggle="modal" (click)="updateInstallOption(currentApp)" data-target="#install-modal">安装</button>
    <button i18n type="button" class="btn btn-secondary">导入</button>
</div>

<!--应用变更中-->
<div class="actions" *ngIf="currentApp.isInstalled() && !currentApp.isReady()">
    <div>
        <span i18n *ngIf="currentApp.isDownloading()">正在下载</span>
        <span i18n *ngIf="currentApp.isInstalling()">正在安装...</span>
        <span i18n *ngIf="currentApp.isUninstalling()">正在卸载...</span>
        <span i18n *ngIf="currentApp.isWaiting()">等待安装...</span>
        <span *ngIf="currentApp.status.total">{{(currentApp.status.progress/currentApp.status.total * 100).toFixed()}}%</span>
        <span>{{currentApp.progressMessage()}}</span>
    </div>
    <progress class="progress" [class.progress-striped]="!currentApp.status.total" [class.progress-animated]="!currentApp.status.total" value="{{currentApp.status.progress}}" max="{{currentApp.status.total}}"></progress>
</div>

<!--应用ready-->
<div class="actions" *ngIf="currentApp.isReady() && (currentApp.id != 'ygopro')">
    <button i18n *ngIf="currentApp.runable()" (click)="runApp(currentApp)" type="button" class="btn btn-primary">运行</button>
    <button i18n *ngIf="currentApp.runable() && currentApp.actions.get('custom')" (click)="custom(currentApp)" type="button" class="btn btn-secondary">设置</button>
    <div id="network" *ngIf="currentApp.network && currentApp.network.protocol == 'maotama'">
        <div class="input-group">
            <input *ngIf="appsService.connections.get(currentApp)" [value]="appsService.connections.get(currentApp).address || 'Loading...'" readonly type="text" class="form-control" title="address">
            <div class="input-group-btn">
                <button i18n *ngIf="!appsService.connections.get(currentApp)" (click)="appsService.network(currentApp, currentApp.network.servers[0])" type="button" class="btn btn-secondary">联机</button>
                <button i18n *ngIf="appsService.connections.get(currentApp)" (click)="copy(appsService.connections.get(currentApp).address)" [disabled]="!appsService.connections.get(currentApp).address" type="button" class="btn btn-secondary">复制</button>
                <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" style="height: 38px;"></button>
                <div class="dropdown-menu" [class.dropdown-menu-right]="appsService.connections.get(currentApp)">
                    <h6 i18n class="dropdown-header">选择服务器</h6>
                    <a *ngFor="let server of currentApp.network.servers" (click)="appsService.network(currentApp, server)" class="dropdown-item" href="#">{{server.id}}</a>
                </div>
            </div>
        </div>
    </div>
</div>
<ygopro *ngIf="currentApp.isReady() && (currentApp.id == 'ygopro')" [app]="currentApp"></ygopro>

<h2 i18n *ngIf="news && news.length">新闻</h2>
<div id="news" *ngFor="let item of news">
    <h3>{{item.title}}</h3>
    <p>{{item.text}}</p>
    <a i18n *ngIf="item.url" [href]="item.url" target="_blank">了解更多</a>
</div>

<div *ngIf="currentApp.isReady()">
    <div *ngIf="mods && mods.length">
        <table class="table table-striped">
            <thead class="thead-inverse">
            <tr>
                <th>#</th>
                <th i18n>名称</th>
                <th i18n>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr *ngFor="let mod of mods; let i = index">
                <th scope="row">{{i + 1}}</th>
                <td>{{mod.name}}</td>
                <td *ngIf="mod.isReady()">
                    <button i18n type="button" (click)="uninstall(mod)" class="btn btn-danger btn-sm">卸载</button>
                </td>
                <td *ngIf="!mod.isInstalled()">
                    <button i18n (click)="installMod(mod)" type="button" *ngIf="!mod.isInstalled()" class="btn btn-primary btn-sm">安装</button>
                </td>
                <td *ngIf="mod.isInstalled()&&!mod.isReady()">:
                    <progress class="progress progress-striped progress-animated" value="{{mod.status.progress}}" max="{{mod.status.total}}"></progress>
                    <!--<div i18n *ngIf="mod.isWaiting()">等待安装...</div>-->
                </td>
            </tr>
            </tbody>
        </table>
    </div>
    <h2 i18n>本地文件</h2>
    <button i18n (click)="appsService.browse(currentApp)" type="button" class="btn btn-secondary">浏览本地文件</button>
    <button i18n type="button" class="btn btn-secondary">校验完整性</button>
    <button i18n (click)="uninstall(currentApp)" type="button" class="btn btn-secondary">卸载</button>
</div>

<!--安装modal-->
<div class="modal fade" id="install-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" *ngIf="installOption">
    <div class="modal-dialog" role="document">
        <form id="install-form" class="modal-content" (ngSubmit)="install(currentApp,installOption,referencesInstall)" #theForm="ngForm">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span>&times;</span>
                </button>
                <h4 i18n class="modal-title" id="myModalLabel">安装 {{currentApp.name}}</h4>
            </div>
            <div class="modal-body">
                <p i18n>即将开始安装 {{currentApp.name}}</p>
                <h4 i18n>安装位置</h4>
                <div class="form-group">
                    <select class="form-control" name="installPath" (change)="selectLibrary()" [(ngModel)]="installOption.installLibrary" title="path">
                        <option *ngFor="let library of libraries" value="{{library}}"> {{library}}</option>
                        <option *ngFor="let library of availableLibraries" value="create_{{library}}">在 {{library}}\ 盘新建 MyCard 库</option>
                    </select></div>
                <h4 i18n>快捷方式</h4>
                <div class="checkbox">
                    <input id="create_application_shortcut" type="checkbox" name="application" [(ngModel)]="installOption.createShortcut">
                    <label i18n *ngIf="platform == 'darwin'" for="create_application_shortcut">创建 LaunchPad 快捷方式</label>
                    <label i18n *ngIf="platform == 'win32'" for="create_application_shortcut">创建开始菜单快捷方式</label>
                </div>
                <div class="checkbox">
                    <input id="create_desktop_shortcut" type="checkbox" name="desktop" [(ngModel)]="installOption.createDesktopShortcut">
                    <label i18n for="create_desktop_shortcut">创建桌面快捷方式</label>
                </div>
                <h4 i18n *ngIf="references.length>0">扩展内容</h4>
                <div *ngFor="let reference of references"><label>
                    <input type="checkbox" [(ngModel)]="referencesInstall[reference.id]" name="references"> {{reference.name}}
                </label></div>
                <div *ngIf="currentApp.findDependencies().length">
                    <span i18n>依赖：</span>
                    <span class="dependency" *ngFor="let dependency of currentApp.findDependencies()">{{dependency.name}}</span>
                </div>
            </div>
            <div class="modal-footer">
                <button i18n type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                <button i18n id="submit" type="submit" [disabled]="!theForm.form.valid" class="btn btn-primary">安装</button>
            </div>
        </form>
    </div>
</div>