<div class="container payment-container">
	<div class="payment-wrapper">
		<div class="payment-header">
			<h1>
				{{ t('payment_title') }}
			</h1>
			<p class="payment-subtitle">
				{{ t('payment_subtitle') }}
			</p>
            <div ng-if="!declarationReady" class="alert alert-danger" style="margin-top: 20px;">
                <h3>{{ t('payment_declaration_missing_title') }}</h3>
                <p>{{ t('payment_declaration_missing_text') }}</p>
                <div class="form-actions" style="justify-content: center; margin-top: 15px;">
                    <button class="btn btn-primary" ng-click="goBack()">{{ t('return_home') }}</button>
                </div>
            </div>
		</div>

        <div ng-if="paymentError && declarationReady" class="alert alert-danger" style="margin-top: 20px;">
            <h3 ng-if="paymentError !== t('submission_platform_error')">{{ t('payment_error_title') }}</h3>
            <h3 ng-if="paymentError === t('submission_platform_error')">{{ t('submission_error_title') }}</h3>
            <p>{{ paymentError }}</p>
            
            <div ng-if="paymentError === t('submission_platform_error')" style="margin-top: 1rem;">
                <div class="form-group">
                    <label for="client_email">Email*</label>
                    <input type="email" id="client_email" name="client_email" ng-model="clientEmail" class="form-control" placeholder="votre.email@exemple.ch">
                </div>
                <button class="btn btn-primary" ng-click="window.onPaymentSuccess({sessionToken: 'platform_error_fallback'})" ng-disabled="!clientEmail">{{ t('submit_email') }}</button>
            </div>

            <div class="form-actions" style="justify-content: center; margin-top: 1.5rem;">
                <button class="btn btn-secondary" ng-click="editDeclaration()">{{ t('edit_declaration') }}</button>
                <button class="btn btn-primary" ng-click="retryPayment()" ng-if="paymentError !== t('submission_platform_error')">{{ t('retry_payment') }}</button>
            </div>
        </div>
        
		<div class="legal-notice" ng-if="declarationReady && !paymentError">
			<h3>
				{{ t('legal_notice_title') }}
			</h3>
			<div class="legal-content">
				<p>
					{{ t('legal_notice_text_1') }}
				</p>
				<p>
					{{ t('legal_notice_text_2') }}
				</p>
				<p>
					{{ t('legal_notice_text_3') }}
				</p>
			</div>
		</div>
		<div class="pricing-box" ng-if="declarationReady && !paymentError">
			<div class="price-item">
				<span class="price-label">
					{{ t('service_type') }}:
				</span>
				<span class="price-value">
					{{ t(destinationType === 'import' ? 'import_vehicle_nav' : 'export_vehicle_nav')
					}}
				</span>
			</div>
			<div class="price-item total">
				<span class="price-label">
					{{ t('total_price') }}:
				</span>
				<span class="price-value">
					{{ amount | currency: (currency + ' ') }} </span>
			</div>
			<p class="price-notice">
				{{ t('payment_single_use') }}
			</p>
		</div>
		
		<div class="payment-form-container" ng-show="declarationReady && !loading && !paymentError">
			<form id="payment-form" onsubmit="return false;">
				<div id="payment-element">
					</div>
				<button id="submit" type="submit" class="btn btn-primary" style="margin-top: 15px;" ng-click="finalizePayment()" ng-disabled="processing || !paymentElementComplete">
				  💳 {{ t('pay_now') }}
				</button>
                <img ng-show="processing" src="path/to/loading.gif" alt="{{ t('processing_payment') }}" style="width: 20px; margin-left: 10px;">
				</form>
		</div>
        
        <div ng-if="loading && declarationReady && !paymentError" class="loading-message" style="text-align: center; margin-top: 50px;">
            <p>{{ t('loading_payment') }}</p>
            <img src="path/to/loading.gif" alt="{{ t('loading_data') }}" style="width: 50px;">
        </div>

        <div class="back-link" style="margin-top: 30px;">
            <a href="#" ng-click="goBack()">
                &larr; {{ t('return_home') }}
            </a>
        </div>
	</div>
</div>
