<loading-panel ng-if="loading"></loading-panel>
<div ng-if="!loading">
    <heading-bar heading="Attributes" subheading="[[attribute.name]]">
        <button ng-if="admin"
            class="btn btn-info"
            data-toggle="modal"
            data-target="#updateAttrModal"
        >Update Attribute</button>
        <button ng-if="admin"
            class="btn btn-danger"
            data-toggle="modal"
            data-target="#deleteAttrModal"
        >Delete Attribute</button>
    </heading-bar>

    <div class="row"><div class="col-sm-8 col-sm-offset-2">
        <panel>
            <panel-heading>
                Attribute
            </panel-heading>
            <panel-body>
                <dl class="dl-horizontal">
                    <dt>Name</dt>
                    <dd>[[attribute.name]]</dd>

                    <dt>Resource Type</dt>
                    <dd>[[attribute.resource_name]]</dd>

                    <dt>Description</dt>
                    <dd>[[attribute.description]]</dd>

                    <dt>Value Pattern</dt>
                    <dd>[[attribute.constraints.pattern]]</dd>

                    <dt>Valid Values</dt>
                    <dd>[[attribute.constraints.valid_values.join(", ")]]</dd>

                    <dt>Required</dt>
                    <dd><i ng-if="attribute.required" class="fa fa-check"></i></dd>

                    <dt>Display</dt>
                    <dd><i ng-if="attribute.display" class="fa fa-check"></i></dd>

                    <dt>Allow Multiple Values</dt>
                    <dd><i ng-if="attribute.multi" class="fa fa-check"></i></dd>

                    <dt>Allow Empty Values</dt>
                    <dd>
                        <i ng-if="attribute.constraints.allow_empty" class="fa fa-check"></i>
                    </dd>

                </dl>

            </panel-body>
       </panel>
    </div></div>

    <nsot-modal title="Update Attribute" modal-id="updateAttrModal" modal-size="large">
        <div class="modal-body">
            <div ng-if="updateError" class="alert alert-danger">
                [[updateError.code]] - [[updateError.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="updateAttribute()"
                    class="btn btn-primary" ng-disabled="attrForm.$invalid"
            >
                Update
            </button>
        </div>
    </nsot-modal>

    <nsot-modal title="Delete Attribute" modal-id="deleteAttrModal">
        <div class="modal-body">
            <div ng-if="deleteError" class="alert alert-danger">
                [[deleteError.code]] - [[deleteError.message]]
            </div>
            Are you sure you want to delete this attribute?
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">
                Close
            </button>
            <button type="submit"
                    ng-click="deleteAttribute()"
                    class="btn btn-primary"
            >
                Delete
            </button>
        </div>
    </nsot-modal>

</div>
