<h1 class="page-header">{{app.name}}
    <button id="app_play" type="button" class="btn btn-default" ng-if="local.installation" ng-click="run()" ng-disabled="runtime.running">
        <span class="glyphicon glyphicon-play"></span> 开始
    </button>
    <button id="app_install" type="button" class="btn btn-default" ng-if="!local.installation" data-toggle="modal" data-target="#app_install_modal">
        <span class="glyphicon glyphicon-save"></span> 安装
    </button>
    <button id="app_add" type="button" class="btn btn-default" ng-if="!local.installation">
        <span class="glyphicon glyphicon-plus"></span> 添加
    </button>

    <div id="cloud_wrapper" class="cloud input-group pull-right" ng-if="runtime.tunnel">
        <div class="input-group-btn">
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="tunnel_server_name">{{runtime.tunnel_server.name}}</span> <span class="caret"></span></button>
            <ul class="dropdown-menu">
                <li ng-repeat="server in tunnel_servers"><a href="#" ng-click="tunnel(server);$event.preventDefault()">{{server.name}}</a></li>
            </ul>
        </div>
        <input id="cloud_address" type="text" class="form-control" ng-value="runtime.tunnel">
    </div>
    <button id="cloud_button" type="button" class="cloud btn btn-default pull-right" ng-if="local.installation && app.network && !runtime.tunnel" ng-disabled="runtime.tunneling" ng-click="tunnel()">
        <span class="glyphicon glyphicon-cloud"></span> 反重力场
    </button>
</h1>

<!-- Modal -->
<div class="modal fade" id="app_install_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">安装 {{app.name}}</h4>
            </div>
            <div class="modal-body">
                <!--<b>如果您已经有了 {{app.name}}，请取消，然后点 添加 按钮，选择您本机上 {{app.name}} 主程序</b>-->
                <p>即将开始安装 {{app.name}}</p>

                <p>下载大小: {{app.download.size | filesize}}</p>

                <form role="form">
                    <div class="form-group">
                        <label for="app_install_installation">安装位置</label>

                        <div class="input-group">
                            <input id="app_install_installation" type="text" class="form-control" value="{{default_installation_path}}">
                            <span class="input-group-btn">
                                <button class="btn btn-default" type="button">浏览</button>
                            </span>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="app_install_installation">快捷方式</label>

                        <div class="checkbox">
                            <label>
                                <input type="checkbox" checked> 桌面
                            </label>
                        </div>

                        <div class="checkbox">
                            <label>
                                <label>
                                    <input type="checkbox" checked> “开始”屏幕 <!--if windows >= 8-->
                                </label>
                            </label>
                        </div>

                        <!--if gnome-->
                        <!--
                        <div class="checkbox">
                            <label>
                                <label>
                                    <input type="checkbox" checked> “应用程序”菜单
                                </label>
                            </label>
                        </div>-->

                    </div>

                    <!--<label ng-if="app.mods | filter: {type: 'language'}">语言包</label>
                    <div class="checkbox" ng-repeat="(mod) in app.mods | filter: {type: 'language'}">
                        <label>
                            <input type="checkbox" checked> {{mod.languages[0] | language_translate}}
                        </label>
                    </div>-->
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" data-dismiss="modal" ng-click="install()">安装</button>
            </div>
        </div>
    </div>
</div>
<input id="app_add_file" class="hide" type="file" accept="application/octet-stream"/>
<div class="progress progress-striped active" ng-repeat="item in runtime.installing">
    <div class="progress-bar" role="progressbar" aria-valuenow="{{item.progress}}" aria-valuemin="0" aria-valuemax="100" style="width:{{item.progress}}%">
        {{item.label}}
    </div>
</div>
<div ng-bind-html="app.summary | markdown"></div>
<h2 class="sub-header">好友</h2>

<p>您有 8 位好友玩过 {{app.name}}，有 2 位正在玩</p>
<img class="friend img-thumbnail active" src="https://lh5.googleusercontent.com/-crYEtoQ-4Ho/AAAAAAAAAAI/AAAAAAAAAZE/OVA-78yQjU8/s46-c-k-no/photo.jpg">
<img class="friend img-thumbnail active" src="https://lh5.googleusercontent.com/-crYEtoQ-4Ho/AAAAAAAAAAI/AAAAAAAAAZE/OVA-78yQjU8/s46-c-k-no/photo.jpg">
<img class="friend img-thumbnail" src="https://lh5.googleusercontent.com/-crYEtoQ-4Ho/AAAAAAAAAAI/AAAAAAAAAZE/OVA-78yQjU8/s46-c-k-no/photo.jpg">
<img class="friend img-thumbnail" src="https://lh5.googleusercontent.com/-crYEtoQ-4Ho/AAAAAAAAAAI/AAAAAAAAAZE/OVA-78yQjU8/s46-c-k-no/photo.jpg">
<img class="friend img-thumbnail" src="https://lh5.googleusercontent.com/-crYEtoQ-4Ho/AAAAAAAAAAI/AAAAAAAAAZE/OVA-78yQjU8/s46-c-k-no/photo.jpg">
<img class="friend img-thumbnail" src="https://lh5.googleusercontent.com/-crYEtoQ-4Ho/AAAAAAAAAAI/AAAAAAAAAZE/OVA-78yQjU8/s46-c-k-no/photo.jpg">
<img class="friend img-thumbnail" src="https://lh5.googleusercontent.com/-crYEtoQ-4Ho/AAAAAAAAAAI/AAAAAAAAAZE/OVA-78yQjU8/s46-c-k-no/photo.jpg">
<img class="friend img-thumbnail" src="https://lh5.googleusercontent.com/-crYEtoQ-4Ho/AAAAAAAAAAI/AAAAAAAAAZE/OVA-78yQjU8/s46-c-k-no/photo.jpg">

<h2 class="sub-header" ng-repeat-start="achievement in app.achievements">{{achievement.name}}</h2>

<div class="clearfix" ng-if="achievement_unlocked_count($index) > 0">
    <img class="achievement_image img-thumbnail pull-left" ng-src="{{achievement_last_unlocked($index).icon}}">

    <div class="pull-left achievement_text">
        <p>最近获得的新{{achievement.name}} <br>{{achievement_last_unlocked($index).name}}</p>
        <span class="help-block">你已获得 {{achievement_unlocked_count($index)}} / {{achievement_total_count($index)}} 的{{achievement.name}} ({{100*achievement_unlocked_count($index)/achievement_total_count($index)}}%)</span>
    </div>
</div>
<div class="progress" ng-if="achievement_unlocked_count($index) > 0">
    <div class="progress-bar" role="progressbar" aria-valuenow="{{achievement_unlocked_count($index)}}" aria-valuemin="0" aria-valuemax="{{achievement_total_count($index)}}" style="width: {{100*achievement_unlocked_count($index)/achievement_total_count($index)}}%;">
        <span class="sr-only">60% Complete</span>
    </div>
</div>

<div ng-repeat-end>
    <a href="#" data-toggle="tooltip" data-container="body" title="Some tooltip text!" ng-repeat="item in achievement.items">
        <img class="achievement img-thumbnail" ng-class="achievement_locked($parent.$index, $index)" src="{{item.icon}}">
    </a>
</div>

<div ng-show="local.installation">
    <h2 class="sub-header">设置</h2>
    <button id="app_uninstall" type="button" class="btn btn-default" data-toggle="modal" data-target="#app_uninstall_modal" ng-disable="runtime.running || runtime.uninstalling">
        <span class="glyphicon glyphicon-trash"></span> 卸载
    </button>
    <div class="modal fade" id="app_uninstall_modal" tabindex="-1" role="dialog" aria-labelledby="app_uninstall_modal_label" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="app_uninstall_modal_label">卸载 {{app.name}}</h4>
                </div>
                <div class="modal-body">
                    继续将会删除你的 {{app.name}}，以及同一目录内的所有文件，确认卸载?
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-danger" data-dismiss="modal" ng-click="uninstall()">卸载</button>
                </div>
            </div>
        </div>
    </div>
</div>