<?php
/**
 * API credentials settings block.
 *
 * @package EventimUSEventListings
 */

defined( 'ABSPATH' ) || exit;
?>
<div class="dashboard-module">
	<div class="module-header">
		<h1><?php esc_html_e( 'Eventim US API Credentials', 'eventim-us-event-listings' ); ?></h1>
		<h4><?php esc_html_e( 'Your new API credentials will be found on your Eventim US Client Dashboard under Market on the API Credentials for Events Integration page.', 'eventim-us-event-listings' ); ?>
		</h4>
	</div>
	<div class="module-content">
		<div class="api-credentials-container">
			<?php foreach ( $evuselConfig->get( 'api.client_credentials' ) as $evusel_index => $evusel_credentials ) : ?>
				<div class="api-credential-unit">
					<div class="credential-input">
						<label><?php esc_html_e( 'API KEY', 'eventim-us-event-listings' ); ?></label>
						<input type="text" class="custom-label-input api-input-field"
							data-group="<?php echo esc_attr( $evusel_index ); ?>"
							name="<?php echo esc_attr( "evusel_settings[api][client_credentials][{$evusel_index}][api_key]" ); ?>"
							value="<?php echo esc_attr( $evusel_credentials['api_key'] ); ?>" />
					</div>
					<div class="credential-input">
						<label><?php esc_html_e( 'API SECRET', 'eventim-us-event-listings' ); ?></label>
						<input type="password" class="custom-label-input api-input-field"
							data-group="<?php echo esc_attr( $evusel_index ); ?>"
							name="<?php echo esc_attr( "evusel_settings[api][client_credentials][{$evusel_index}][api_secret]" ); ?>"
							value="<?php echo esc_attr( $evusel_credentials['api_secret'] ); ?>" />
					</div>
					<div class="credential-input">
						<label><?php esc_html_e( 'CLIENT ID', 'eventim-us-event-listings' ); ?></label>
						<input type="text" class="custom-label-input api-input-field"
							data-group="<?php echo esc_attr( $evusel_index ); ?>"
							name="<?php echo esc_attr( "evusel_settings[api][client_credentials][{$evusel_index}][client_id]" ); ?>"
							value="<?php echo esc_attr( $evusel_credentials['client_id'] ); ?>" />
					</div>
					<div class="credential-action">
						<button type="button" class="delete-credential-btn see-delete-all btn-delete-credential"
							title="Delete credentials">Delete</button>
					</div>
				</div>
			<?php endforeach; ?>
		</div>
		<div class="add-credential-wrapper">
			<button type="button" class="see-add-item" id="add-new-credential-btn-2023">
				<?php esc_html_e( '+ Add new credential', 'eventim-us-event-listings' ); ?>
			</button>
		</div>
	</div>
</div>