<h3>{{bucket.displayName}} 
    <span [class.error]="totalAllocationPercentage > 100"> 
        <span *ngIf="!isEditing" (click)="edit()">({{bucket.allocationPercentage}}%)</span>
        <span *ngIf="isEditing">
            (<input type="number" [(ngModel)]="bucket.allocationPercentage"/>%)
            <button (click)="stopEditing()">OK</button>
        </span>
    </span>
</h3>
<p><b [class.overcommitted]="bucket.resourcesCommitted() > bucketAllocation()">
    {{bucket.resourcesCommitted()}} of {{bucketAllocation() | number:'1.1-1'}} {{unit}} committed
</b></p>
<ul>
    <app-objective *ngFor="let objective of bucket.objectives"
        [objective]="objective" [unit]="unit"
        [validAssignees]="validAssignees"
        (onDelete)="deleteObjective($event)"></app-objective>
</ul>
<button (click)="addObjective()">Add Objective</button>
<h3>
    <span *ngIf="!isEditing" (click)="edit()">{{bucket.displayName}}</span>
    <span *ngIf="isEditing"><input [(ngModel)]="bucket.displayName"/></span>
    <span [class.error]="totalAllocationPercentage > 100"> 
        <span *ngIf="!isEditing" (click)="edit()">({{bucket.allocationPercentage}}%)</span>
        <span *ngIf="isEditing">
            (<input type="number" [(ngModel)]="bucket.allocationPercentage"/>%)
            <button (click)="stopEditing()">OK</button>
        </span>
    </span>
</h3>
<p><b [class.overcommitted]="bucket.resourcesCommitted() > bucketAllocation()">
    {{bucket.resourcesCommitted()}} of {{bucketAllocation() | number:'1.1-1'}} {{unit}} committed
</b></p>
<ul>
    <app-objective *ngFor="let objective of bucket.objectives"
        [objective]="objective" [unit]="unit"
        [validAssignees]="validAssignees"
        (onDelete)="deleteObjective($event)"></app-objective>
</ul>
<button (click)="addObjective()">Add Objective</button>
Allow editing of bucket name
Allow editing of bucket name
