<div class="container">

    <div class="row">
        <h3 class="pull-left" data-translate="moon.policy.edit.title" data-translate-values="{ policyName: edit.policy.name }">Edit</h3>
    </div>

    <div class="panel panel-default">

        <div class="panel-heading">

            <span data-translate="moon.policy.edit.basic.title" >Basic Information</span>
            <a href="" ng-click="edit.editBasic = !edit.editBasic">
                <span data-translate="moon.policy.edit.update">Update</span>
                <span class="glyphicon glyphicon-cog"></span>
            </a>

        </div>

        <div class="panel-body">

            <div ng-if="edit.editBasic">
                <moon-policy-edit-basic policy="edit.policy"></moon-policy-edit-basic>
            </div>

            <div ng-if="!edit.editBasic">

                <dl class="dl-horizontal">

                    <dt data-translate="moon.policy.edit.basic.form.id">Id</dt>
                    <dd ng-bind="edit.policy.id"></dd>

                    <dt data-translate="moon.policy.edit.basic.form.name">Name</dt>
                    <dd ng-bind="edit.policy.name"></dd>

                    <dt data-translate="moon.policy.edit.basic.form.genre">Genre</dt>
                    <dd ng-bind="edit.policy.genre"></dd>

                    <dt data-translate="moon.policy.edit.basic.form.model">Model</dt>
                    <dd>

                        <span ng-if="edit.loadingModel">
                            <moon-loader ng-if="edit.loadingModel"></moon-loader>
                        </span>
                        <span ng-if="!edit.loadingModel">
                            <span ng-bind="edit.policy.model.name" ></span>
                        </span>

                    </dd>

                    <dt data-translate="moon.policy.edit.basic.form.description">Description</dt>
                    <dd ng-bind="edit.policy.description"></dd>

                </dl>

            </div>

        </div>

    </div>

    <div class="panel panel-default">

        <div class="panel-heading">

            <span data-translate="moon.policy.edit.perimeter.title" >Perimeters</span>

            <a href="" ng-click="edit.showPart('showPerimeters')">

                <span ng-if="!edit.showPerimeters">
                    <span data-translate="moon.policy.edit.show.open">Show</span>
                    <span class="glyphicon glyphicon-eye-open"></span>
                </span>

                <span ng-if="edit.showPerimeters">
                    <span data-translate="moon.policy.edit.show.close">Show</span>
                    <span class="glyphicon glyphicon-eye-close"></span>
                </span>

            </a>

            <!--<a href="" ng-if="edit.showPerimeters">
                <span data-translate="moon.policy.edit.update">Update</span>
                <span class="glyphicon glyphicon-cog"></span>
            </a>-->

        </div>

        <div class="panel-body" ng-if="edit.showPerimeters">

            <moon-perimeter-list edit-mode="true" policy="edit.policy" ></moon-perimeter-list>

        </div>

    </div>

    <div class="panel panel-default">

        <div class="panel-heading">

            <span data-translate="moon.policy.edit.data.title" >Data</span>

            <a href="" ng-click="edit.showPart('showData')">

                <span ng-if="!edit.showData">
                    <span data-translate="moon.policy.edit.show.open">Show</span>
                    <span class="glyphicon glyphicon-eye-open"></span>
                </span>

                <span ng-if="edit.showData">
                    <span data-translate="moon.policy.edit.show.close">Show</span>
                    <span class="glyphicon glyphicon-eye-close"></span>
                </span>

            </a>

            <!--<a href="" ng-if="edit.showData">
                <span data-translate="moon.policy.edit.update">Update</span>
                <span class="glyphicon glyphicon-cog"></span>
            </a>-->

        </div>

        <div class="panel-body" ng-if="edit.showData" > <!-- -->

            <moon-data-list edit-mode="true" policy="edit.policy" ></moon-data-list>

        </div>

    </div>

    <div class="panel panel-default">

        <div class="panel-heading">

            <span data-translate="moon.policy.edit.rules.title" >Rules</span>

            <a href="" ng-click="edit.showPart('showRules')">

                <span ng-if="!edit.showRules">
                    <span data-translate="moon.policy.edit.show.open">Show</span>
                    <span class="glyphicon glyphicon-eye-open"></span>
                </span>

                <span ng-if="edit.showRules">
                    <span data-showRules="moon.policy.edit.show.close">Close</span>
                    <span class="glyphicon glyphicon-eye-close"></span>
                </span>

            </a>

            <!--<a href="" ng-if="edit.showRules">
                <span data-translate="moon.policy.edit.update">Update</span>
                <span class="glyphicon glyphicon-cog"></span>
            </a>-->

        </div>

        <div class="panel-body" ng-if="edit.showRules">

            <moon-rules-list edit-mode="true" policy="edit.policy" ></moon-rules-list>

        </div>

    </div>


    <div class="panel panel-default">

        <div class="panel-heading">

            <span data-translate="moon.policy.edit.assignments.title" >Assignments</span>

            <a href="" ng-click="edit.showPart('showAssignments')">

                <span ng-if="!edit.showAssignments">
                    <span data-translate="moon.policy.edit.show.open">Show</span>
                    <span class="glyphicon glyphicon-eye-open"></span>
                </span>

                <span ng-if="edit.showAssignments">
                    <span data-showRules="moon.policy.edit.show.close">Close</span>
                    <span class="glyphicon glyphicon-eye-close"></span>
                </span>

            </a>

            <!--<a href="" ng-if="edit.showRules">
                <span data-translate="moon.policy.edit.update">Update</span>
                <span class="glyphicon glyphicon-cog"></span>
            </a>-->

        </div>

        <div class="panel-body" ng-if="edit.showAssignments">

            <moon-assignments-list edit-mode="true" policy="edit.policy" ></moon-assignments-list>

        </div>

    </div>

</div>