<?php
if ( ! defined( 'ABSPATH' ) ) {
	exit;
}
$qrcdr_frames = qrcdr_patterns()->get_frames();
$qrcdr_count = 0;
$qrcdr_count = wp_unique_id( 'qrcdr-frame-' );
?>
<div class="accordion-body mb-3">
	<div class="qrcdr-styleselecta" data-bs-toggle="buttons">
		<div class="qrcdr-scrolling-nav-component">
			<div class="qrcdr-scrolling-nav-wrapper">
				<button class="btn btn-glass qrcdr-scroll-btn qrcdr-scroll-btn-left" aria-label="Prev">
					<?php qrcdr_icons()->the_icon( 'ui', 'chevron-left' ); ?>
				</button>
				<div class="qrcdr-scrolling-nav">
					<div class="d-flex flex-nowrap">
						<input type="radio" name="outer_frame" value="none" checked class="btn-check" id="<?php echo esc_attr( $qrcdr_count ); ?>-id-<?php echo esc_attr( $form_id ); ?>">
						<label role="button" class="py-2 px-3 m-0 rounded-0 d-flex align-items-center" for="<?php echo esc_attr( $qrcdr_count ); ?>-id-<?php echo esc_attr( $form_id ); ?>">
							<?php qrcdr_icons()->the_icon( 'ui', 'x-lg' ); ?>
						</label>
						<?php
						foreach ( $qrcdr_frames as $qrcdr_frame => $qrcdr_values ) {
							$qrcdr_count = wp_unique_id( 'qrcdr-frame-' );
							$qrcdr_view_h = isset( $qrcdr_values['label_size'] ) && isset( $qrcdr_values['label_offset'] ) ? ( 24 + $qrcdr_values['label_size'] + 2 + $qrcdr_values['label_offset'] ) : 24;
							?>
						<input type="radio" name="outer_frame" value="<?php echo esc_attr( $qrcdr_frame ); ?>" class="btn-check" id="<?php echo esc_attr( $qrcdr_count ); ?>-id-<?php echo esc_attr( $form_id ); ?>">
						<label class="btn p-2 rounded-0" for="<?php echo esc_attr( $qrcdr_count ); ?>-id-<?php echo esc_attr( $form_id ); ?>">
							<svg width="48" height="56" viewBox="0 0 24 <?php echo esc_attr( $qrcdr_view_h ); ?>" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
								<?php qrcdr_patterns()->filtered_path( $qrcdr_values['path'] ); ?>
							</svg>
						</label>
							<?php
						}
						?>
					</div>
				</div>
				<button class="btn btn-glass qrcdr-scroll-btn qrcdr-scroll-btn-right" aria-label="Next">
					<?php qrcdr_icons()->the_icon( 'ui', 'chevron-right' ); ?>
				</button>
			</div>
		</div>
	</div>
</div>
<div class="accordion-body">
	<div class="row">
		<div class="col-sm-6">
			<div data-bs-target="#collapse-frame-color-<?php echo esc_attr( $form_id ); ?>" data-bs-toggle="collapse">
				<?php qrcdr_renderer()->the_input( $feature['inputs']['custom_frame_color'] ); ?>	
			</div>
			<div class="collapse collapse-checkbox" id="collapse-frame-color-<?php echo esc_attr( $form_id ); ?>">
				<?php qrcdr_renderer()->the_input( $feature['inputs']['framecolor'] ); ?>
			</div>
		</div>
	</div>
	<div class="row">
		<div class="col-sm-6 mb-3">
			<?php qrcdr_renderer()->the_input( $feature['inputs']['framelabel'] ); ?>
		</div>
		<div class="col-sm-6 mb-3">
			<?php qrcdr_renderer()->the_input( $feature['inputs']['label_font'] ); ?>
		</div>
		<div class="col-sm-6 mb-3">
			<?php qrcdr_renderer()->the_input( $feature['inputs']['labelcolor'] ); ?>
		</div>
		<div class="col-12 mb-3">
			<?php qrcdr_renderer()->the_input( $feature['inputs']['label_text_size'] ); ?>
		</div>
	</div>
</div>
