<loading-panel ng-if="loading"></loading-panel>
<div ng-if="!loading">
    <heading-bar heading="Sites">
        <button
            class="btn btn-success"
            data-toggle="modal"
            data-target="#createSiteModal"
        >Create Site</button>
    </heading-bar>

    <nsot-modal title="Create Site" modal-id="createSiteModal">
        <div class="modal-body">
            <div ng-if="error" class="alert alert-danger">
                [[error.code]] - [[error.message]]
            </div>
            <form novalidate name="siteForm" class="nsot-form">
                <div class="form-group" ng-class="{
                    'has-error' : siteForm.name.$invalid,
                    'has-success' : siteForm.name.$valid,
                }">
                    <input type="text"
                           class="form-control"
                           name="name"
                           placeholder="Name (required)"
                           ng-model="site.name"
                           ng-minlength="1"
                           required
                    >
                </div>
                <div class="form-group">
                    <textarea style="resize: vertical;"
                              class="form-control"
                              rows="5"
                              name="description"
                              placeholder="Description"
                              ng-model="site.description"
                    >
                    </textarea>
                </div>
            </form>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">
                Close
            </button>
            <button type="submit" ng-click="createSite()"
                    class="btn btn-primary" ng-disabled="siteForm.$invalid"
            >
                Create
            </button>
        </div>
    </nsot-modal>

    <div ng-if="!sites.length" class="row"><div class="col-sm-6 col-sm-offset-3">
        <panel>
            <panel-heading>Welcome</panel-heading>
            <panel-body>
                Welcome to the Network Source of Truth. It looks like you're new
                here. Lets start by creating a <em>site</em> with the button above.
                This will be a namespace for all of your data.
            </panel-body>
        </panel>
    </div></div>
    <div class="row" ng-if="sites.length" class="row"><div class="col-sm-10 col-sm-offset-1">
        <panel>
            <panel-heading>Sites</panel-heading>
            <panel-body>
                <table class="table table-condensed table-hover">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Description</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="site in sites">
                            <td class="col-sm-3">
                                <a ng-href="/sites/[[site.id]]">[[site.name]]</a>
                            </td>
                            <td class="col-sm-8">[[site.description]]</td>
                        </tr>
                    </tbody>
                </table>
            </panel-body>
        </panel>

    </div></div>
</div>
