<div
	class="product-payment-manager col-md-12 no-left-right-padding"
	ng-controller="ProductPaymentManagerController"
>
	<div
		ng-if="addPaymentMode"
		class="add-product-payment product-payment-panel"
		data-ng-include="'/modules/product/views/product-payment-manager-add-view.html'"
	>
	</div>

	<div
		class="product-payment-list product-payment-panel"
		ng-class="{
			'edit-mode': editPaymentMode
		}"
	>
		<div
			class="header"
			ng-if="
				!addPaymentMode
			"
		>
			Payment List
		</div>
		<div
			class="body"
			ng-if="
				!addPaymentMode
			"
		>
			<ul
				ng-if="
					!hasProductPayment( )
				"
			>
				<li>
					<div
						class="detail-summary-panel"
					>
						<div
							class="product-payment-detail"
						>
							<h4
								style="
									text-transform: capitalize;
								"
							>
								No payment available
							</h4>
						</div>
					</div>
				</li>
			</ul>

			<ul
				ng-if="
					hasProductPayment( )
				"
			>
				<li
					ng-class="{
						'view-mode': payment._viewMode,
						'edit-mode': payment._editMode
					}"
				>
					<div
						class="detail-summary-panel"
					>
						<div
							class="product-payment-detail"
						>
							<h4
								style="
									text-transform: capitalize;
								"
							>
								{{
									payment.title
								}}
							</h4>
							<p>
								{{
									payment.description
								}}
							</p>
						</div>
						<div
							class="product-payment-detail-summary-control"
						>
							<span
								class="material-icons"
								ng-show="
									!payment._viewMode
								"
								ng-click="
									toggleViewMode( payment )
								"
							>
								expand_more
							</span>
							<span
								class="material-icons"
								ng-show="
									payment._viewMode
								"
								ng-click="
									toggleViewMode( payment )
								"
							>
								expand_less
							</span>
						</div>
					</div>
					<div
						class="detail-panel"
						ng-if="
							payment._viewMode
						"
						ng-class="{
							'edit-mode': payment._editMode
						}"
						data-ng-include="'/modules/product/views/product-payment-manager-detail-view.html'"
					>
					</div>
					<div
						class="detail-control-panel"
						ng-if="
							payment._viewMode
						"
					>
						<div
							class="control-panel"
							ng-if="
								!payment._editMode
							"
						>
							<button
								class="btn btn-primary"
								ng-click="
									activateEditMode( payment )
								"
							>
								Edit
							</button>
						</div>
						<div
							class="control-panel"
							ng-if="
								payment._editMode
							"
						>
							<button
								class="btn btn-primary"
								ng-click="
									savePayment( payment )
								"
							>
								Save
							</button>
							<button
								class="btn btn-default"
								style="
									float:right;
								"
								ng-click="
									deactivateEditMode( payment )
								"
							>
								Cancel
							</button>
						</div>
					</div>
				</li>
			</ul>
		</div>
	</div>
	<hr />

	<div
		class="product-payment-control"
		ng-if="
			!hasProductPayment( )
		"
	>
		<div
			class="col-md-12 no-left-right-padding control-group"
			ng-if="
				!editPaymentMode
				&& !addPaymentMode
			"
		>
			<button
				class="btn btn-primary"
				ng-click="
					activateAddMode( )
				"
			>
				Add
			</button>
		</div>
		<div
			class="col-md-12 no-left-right-padding control-group"
			ng-if="
				!editPaymentMode
				&& addPaymentMode
			"
		>
			<button
				class="btn btn-primary"
				ng-click="
					addPayment( payment )
				"
			>
				Save
			</button>
			<button
				class="btn btn-default"
				style="
					float:right;
				"
				ng-click="
					deactivateAddMode( )
				"
			>
				Cancel
			</button>
		</div>
	</div>
</div>