<div class="container">
    {{> headers/_Title title="console.realms.title" }}
    <p class="page-description">{{t "console.realms.description"}}</p>
    <div class="btn-toolbar page-toolbar"  role="toolbar" aria-label="toolbar">
        <a class="btn btn-primary" id="addRealm" href="#"><i class="fa fa-plus"></i> {{t "console.realms.newRealm"}}</a>
        <ul class="btn-group pull-right" role="group">
            <li class="btn-group tab-toggles"><a class="btn fr-btn-secondary" data-toggle="tab" href="#grid"><i class="fa fa-th"></i></a></li>
            <li class="btn-group tab-toggles"><a class="btn fr-btn-secondary" data-toggle="tab" href="#list"><i class="fa fa-list"></i></a></li>
        </ul>
    </div>

    <div class="tab-content clearfix">
        <div role="tabpanel" class="tab-pane" id="grid">
            <div class="row">
                {{#each realms}}
                <div class="col-sm-6 col-md-3">
                    <div class="panel-default panel am-panel-card realm-name" data-realm-path="{{path}}">
                        <div class="btn-group card-menu">
                            <button type="button" class="btn btn-link dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                                <i class="fa fa-ellipsis-v fa-lg"></i>
                            </button>
                            <ul class="dropdown-menu pull-left" role="menu">
                                <li><a href="#" class="edit-realm"><i class="fa fa-pencil"></i> {{t "common.form.edit"}}</a></li>
                                {{#if active}}
                                    <li><a href="#" class="toggle-realm-active"><i class="fa fa-ban"></i> {{t "common.form.deactivate"}}</a></li>
                                {{else}}
                                    <li><a href="#" class="toggle-realm-active"><i class="fa fa-check"></i> {{t "common.form.activate"}}</a></li>
                                {{/if}}
                                <li class="divider"></li>
                                <li {{#unless canDelete}} class="disabled" {{/unless}}><a href="#" class="delete-realm"><i class="fa fa-times"></i> {{t "common.form.delete"}}</a></li>
                            </ul>
                        </div>
                        <a href="{{routeTo 'realmDefault' path}}">
                            <div class="card-body card-body-with-menu">
                                <div class="card-icon-circle bg-primary">
                                    <i class="fa fa-cloud"></i>
                                </div>
                                <h3 class="card-name text-primary">{{name}}</h3>
                                <div class="card-subtext">
                                    <div class="realm-card-path">{{path}}</div>
                                    <div class="realm-card-aliases">
                                    {{#if aliases}}
                                        {{aliases.[0]}}
                                        {{#if aliases.[1]}}
                                            {{#each aliases}}
                                            {{#if @last}}<br><em>{{@index}} {{t 'common.form.more'}}</em>{{/if}}
                                            {{/each}}
                                        {{/if}}
                                    {{/if}}
                                </div>
                                </div>
                            </div>
                            <div class="card-footer">
                                {{#if active}}
                                    <span class="text-success"><i class="fa fa-check-circle"></i> {{t "common.form.active"}}</span>
                                {{else}}
                                    <span class="text-warning"><i class="fa fa-ban"></i> {{t "common.form.inactive"}}</span>
                                {{/if}}
                            </div>
                        </a>
                    </div>
                </div>
                {{/each}}
            </div>
        </div>
        <div role="tabpanel" class="tab-pane" id="list">
            <div class="panel panel-default">
                <div class="panel-body">
                    <div class="table-container">
                        <table class="table">
                            <thead>
                                <tr>
                                    <th>{{t 'console.realms.header.0'}}</th>
                                    <th>{{t 'console.realms.header.1'}}</th>
                                    <th>{{t 'console.realms.header.2'}}</th>
                                    <th>{{t 'console.realms.header.3'}}</th>
                                    <th class="fr-col-btn-2"></th>
                                </tr>
                            </thead>
                            <tbody>
                            {{#each realms}}
                            <tr>
                                <td class="wordwrap"><a href="{{routeTo 'realmDefault' path}}">{{name}}</a></td>
                                <td class="wordwrap">
                                    {{#if active}}
                                        <span class="text-success"><i class="fa fa-check-circle"></i> {{t "common.form.active"}}</span>
                                    {{else}}
                                        <span class="text-warning"><i class="fa fa-ban"></i> {{t "common.form.inactive"}}</span>
                                    {{/if}}
                                </td>
                                <td class="wordwrap">{{path}}</td>
                                <td>
                                    {{#each aliases}}
                                        {{this}}{{#unless @last}}, {{/unless}}
                                    {{/each}}
                                </td>
                                <td class="fr-col-btn-2">
                                    <div class="btn-group realm-name" data-realm-path="{{path}}">
                                        <button type="button" class="btn btn-link edit-realm" data-realm-name="{{name}}"><i class="fa fa-pencil"></i></button>
                                        <button type="button" class="btn btn-link delete-realm {{#unless canDelete}} disabled {{/unless}}"><i class="fa fa-close"></i></button>
                                    </div>
                                </td>
                            </tr>
                            {{/each}}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
