<div class="container">

{{> headers/_TitleWithSubAndIcon 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="#realms/"><i class="fa fa-plus"></i> {{t "console.realms.newRealm"}}</a>

<ul class="btn-group pull-right" role="group">

<li class="btn-group active"><a class="btn fr-btn-secondary" data-toggle="tab" href="#grid"><i class="fa fa-th"></i></a></li>

<li class="btn-group"><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 active" id="grid">

<div class="row">

{{#each realms}}

<div class="col-sm-6 col-md-3">

<div class="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 "console.realms.actions.edit"}}</a></li>

{{#if active}}

<li><a href="#" class="toggle-realm-active"><i class="fa fa-ban"></i> {{t "console.realms.actions.disable"}}</a></li>

{{else}}

<li><a href="#" class="toggle-realm-active"><i class="fa fa-check"></i> {{t "console.realms.actions.activate"}}</a></li>

{{/if}}

<li class="divider"></li>

<li {{#equals path "/" }} class="disabled" {{/equals}}><a href="#" class="delete-realm"><i class="fa fa-times"></i> {{t "console.realms.actions.delete"}}</a></li>

</ul>

</div>

<a href="{{routeTo 'realmDefault' path}}">

<div class="card-body card-body-with-menu">

<div class="card-icon-circle">

<i class="fa fa-cloud"></i>

</div>

<h3 class="card-name">{{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"></i> {{t 'console.realms.active'}}</span>

{{else}}

<span class="text-warning"><i class="fa fa-exclamation-triangle"></i></i> {{t 'console.realms.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">

<table class="table">

<thead>

<tr>

<th>{{t 'console.realms.realmName'}}</th>

<th>{{t 'console.realms.realmPath'}}</th>

<th>{{t 'console.realms.realmAliases'}}</th>

<th class="col-btn-2"></th>

</tr>

</thead>

<tbody>

{{#each realms}}

<tr>

<td class="wordwrap"><a href="{{routeTo 'realmDefault' path}}">{{name}}</a></td>

<td class="wordwrap">{{path}}</td>

<td>

{{#each aliases}}

{{this}}{{#unless @last}}, {{/unless}}

{{/each}}

</td>

<td class="col-btn-2">

<div class="pull-right btn-group btn-group-sm 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"><i class="fa fa-close"></i></button>

</div>

</td>

</tr>

{{/each}}

</tbody>

</table>

</div>

</div>

</div>

</div>

</div>