<div class="container">

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

    <div class="row">
        <div class="panel panel-default">

            <div class="panel-heading">

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

            </div>

            <div class="panel-body">

                <div ng-if="edit.editBasic">
                    <moon-p-d-p-edit-basic pdp="edit.pdp"></moon-p-d-p-edit-basic>
                </div>

                <div ng-if="!edit.editBasic">
                    <dl class="dl-horizontal">
                        <dt>Id</dt>
                        <dd ng-bind="edit.pdp.id"></dd>
                        <dt>Name</dt>
                        <dd ng-bind="edit.pdp.name"></dd>
                        <dt>Description</dt>
                        <dd ng-bind="edit.pdp.description"></dd>
                    </dl>
                </div>

            </div>

        </div>

        <div class="panel panel-default">

            <div class="panel-heading">

                <h4 data-translate="moon.pdp.edit.policy.title" >Policies</h4>

            </div>

            <div class="panel-body">

                <div class="row">

                    <moon-policy-mapped-list pdp="edit.pdp"></moon-policy-mapped-list>

                </div>

            </div>

        </div>
    </div>

</div>