<?php
/**
 * Module position section.
 *
 * @package Hustle
 * @since 4.0.0
 */

?>
<div class="sui-box-settings-row">

	<div class="sui-box-settings-col-1">
		<?php /* translators: module type capitalized and in singular */ ?>
		<span class="sui-settings-label"><?php printf( esc_html__( '%s Position', 'hustle' ), esc_html( $capitalize_singular ) ); ?></span>
		<?php /* translators: module type in small caps and in singular */ ?>
		<span class="sui-description"><?php printf( esc_html__( 'Choose the position from which your %s will appear on screen.', 'hustle' ), esc_html( $smallcaps_singular ) ); ?></span>
	</div>

	<div class="sui-box-settings-col-2 wpmudev-ui">

		<?php /* translators: module type in small caps and in singular */ ?>
		<label class="sui-settings-label"><?php printf( esc_html__( 'Choose %s position', 'hustle' ), esc_html( $smallcaps_singular ) ); ?></label>

		<?php /* translators: module type in small caps and in singular */ ?>
		<span class="sui-description"><?php printf( esc_html__( 'Select the position from which your %s will appear on the browser window.', 'hustle' ), esc_html( $smallcaps_singular ) ); ?></span>

		<div class="hui-browser" style="margin-top: 10px;">

			<div class="hui-browser-bar" aria-hidden="true">
				<span></span>
				<span></span>
				<span></span>
			</div>

			<ul class="hui-browser-content">

				<li class="hui-first-row"><label for="hustle-module-position--nw">
					<input
						type="radio"
						value="nw"
						name="display_position"
						id="hustle-module-position--nw"
						data-attribute="display_position"
						<?php checked( $display_position, 'nw' ); ?>
					/>
					<span class="hui-browser-position--north-west" aria-hidden="true"></span>
					<?php /* translators: module type in small caps and in singular */ ?>
					<span class="sui-screen-reader-text"><?php printf( esc_html__( 'Show %s from top left', 'hustle' ), esc_html( $smallcaps_singular ) ); ?></span>
				</label></li>

				<li class="hui-first-row"><label for="hustle-module-position--n">
					<input
						type="radio"
						value="n"
						name="display_position"
						id="hustle-module-position--n"
						data-attribute="display_position"
						<?php checked( $display_position, 'n' ); ?>
					/>
					<span class="hui-browser-position--north" aria-hidden="true"></span>
					<?php /* translators: module type in small caps and in singular */ ?>
					<span class="sui-screen-reader-text"><?php printf( esc_html__( 'Show %s from top', 'hustle' ), esc_html( $smallcaps_singular ) ); ?></span>
				</label></li>

				<li class="hui-first-row"><label for="hustle-module-position--ne">
					<input
						type="radio"
						value="ne"
						name="display_position"
						id="hustle-module-position--ne"
						data-attribute="display_position"
						<?php checked( $display_position, 'ne' ); ?>
					/>
					<span class="hui-browser-position--north-east" aria-hidden="true"></span>
					<?php /* translators: module type in small caps and in singular */ ?>
					<span class="sui-screen-reader-text"><?php printf( esc_html__( 'Show %s from top right', 'hustle' ), esc_html( $smallcaps_singular ) ); ?></span>
				</label></li>

				<li><label for="hustle-module-position--w">
					<input
						type="radio"
						value="w"
						name="display_position"
						id="hustle-module-position--w"
						data-attribute="display_position"
						<?php checked( $display_position, 'w' ); ?>
					/>
					<span class="hui-browser-position--west" aria-hidden="true"></span>
					<?php /* translators: module type in small caps and in singular */ ?>
					<span class="sui-screen-reader-text"><?php printf( esc_html__( 'Show %s from left', 'hustle' ), esc_html( $smallcaps_singular ) ); ?></span>
				</label></li>

				<li aria-hidden="true"></li>

				<li><label for="hustle-module-position--e">
					<input
						type="radio"
						value="e"
						name="display_position"
						id="hustle-module-position--e"
						data-attribute="display_position"
						<?php checked( $display_position, 'e' ); ?>
					/>
					<span class="hui-browser-position--east" aria-hidden="true"></span>
					<?php /* translators: module type in small caps and in singular */ ?>
					<span class="sui-screen-reader-text"><?php printf( esc_html__( 'Show %s from right', 'hustle' ), esc_html( $smallcaps_singular ) ); ?></span>
				</label></li>

				<li class="hui-last-row"><label for="hustle-module-position--sw">
					<input
						type="radio"
						value="sw"
						name="display_position"
						id="hustle-module-position--sw"
						data-attribute="display_position"
						<?php checked( $display_position, 'sw' ); ?>
					/>
					<span class="hui-browser-position--south-west" aria-hidden="true"></span>
					<?php /* translators: module type in small caps and in singular */ ?>
					<span class="sui-screen-reader-text"><?php printf( esc_html__( 'Show %s from bottom left', 'hustle' ), esc_html( $smallcaps_singular ) ); ?></span>
				</label></li>

				<li class="hui-last-row"><label for="hustle-module-position--s">
					<input
						type="radio"
						value="s"
						name="display_position"
						id="hustle-module-position--s"
						data-attribute="display_position"
						<?php checked( $display_position, 's' ); ?>
					/>
					<span class="hui-browser-position--south" aria-hidden="true"></span>
					<?php /* translators: module type in small caps and in singular */ ?>
					<span class="sui-screen-reader-text"><?php printf( esc_html__( 'Show %s from bottom', 'hustle' ), esc_html( $smallcaps_singular ) ); ?></span>
				</label></li>

				<li class="hui-last-row"><label for="hustle-module-position--se">
					<input
						type="radio"
						value="se"
						name="display_position"
						id="hustle-module-position--se"
						data-attribute="display_position"
						<?php checked( $display_position, 'se' ); ?>
					/>
					<span class="hui-browser-position--south-east" aria-hidden="true"></span>
					<?php /* translators: module type in small caps and in singular */ ?>
					<span class="sui-screen-reader-text"><?php printf( esc_html__( 'Show %s from bottom right', 'hustle' ), esc_html( $smallcaps_singular ) ); ?></span>
				</label></li>

			</ul>

		</div>

	</div>

</div>