<loading-panel ng-if="loading"></loading-panel>
<div ng-if="!loading">
    <heading-bar heading="Attributes">
        <button
            ng-if="admin"
            class="btn btn-success"
            data-toggle="modal"
            data-target="#createAttributeModal"
        >Create Attribute</button>
    </heading-bar>

    <nsot-modal title="Create Attribute" modal-id="createAttributeModal" modal-size="large">
        <div class="modal-body">
            <div ng-if="error" class="alert alert-danger">
                [[error.code]] - [[error.message]]
            </div>
            <form novalidate name="attrForm" class="nsot-form">
                <div ng-include="formUrl"></div>
            </form>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">
                Close
            </button>
            <button type="submit" ng-click="createAttribute()"
                    class="btn btn-primary" ng-disabled="attrForm.$invalid"
            >
                Create
            </button>
        </div>
    </nsot-modal>

    <div class="row" ng-if="attributes.length" class="row"><div class="col-sm-10 col-sm-offset-1">
        <panel>
            <panel-heading>Attributes</panel-heading>
            <panel-body ng-if="!attributes.length">
                No Attributes
            </panel-body>
            <panel-body ng-if="attributes.length">
                <table class="table table-condensed table-hover">
                    <thead>
                        <tr>
                            <th class="col-sm-1">Resource Type</th>
                            <th class="col-sm-2">Name</th>
                            <th class="col-sm-3">Description</th>
                            <th class="col-sm-1">Required</th>
                            <th class="col-sm-1">Display</th>
                            <th class="col-sm-1">Multi</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="attr in attributes">
                            <td>[[attr.resource_name]]</td>
                            <td>
                                <a href="/sites/[[siteId]]/attributes/[[attr.id]]"
                                >[[attr.name]]</a>
                            </td>
                            <td>[[attr.description]]</td>
                            <td>
                                <i ng-if="attr.required" class="fa fa-check"></i>
                            </td>
                            <td>
                                <i ng-if="attr.display" class="fa fa-check"></i>
                            </td>
                            <td>
                                <i ng-if="attr.multi" class="fa fa-check"></i>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </panel-body>
        </panel>

    </div></div>


</div>
