<?php
/**
 * Shortcodes page for AnWP Football Leagues
 *
 * @link       https://anwp.pro
 * @since      0.10.8
 *
 * @package    AnWP_Football_Leagues
 * @subpackage AnWP_Football_Leagues/admin/views
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit;
}
?>
<div class="anwp-mb-2 anwp-pb-1">
	<h1 class="anwp-font-normal anwp-mb-0"><?php echo esc_html__( 'How To\'s', 'anwp-football-leagues' ); ?> - <?php echo esc_html__( 'Shortcodes', 'anwp-football-leagues' ); ?></h1>
</div>
<div class="anwp-mb-3 anwp-d-flex anwp-items-center">
	<a class="anwp-link-without-effects" href="<?php echo esc_url( self_admin_url( 'admin.php?page=anwpfl-shortcodes' ) ); ?>">
		<?php echo esc_html__( 'Shortcode Builder', 'anwp-football-leagues' ); ?>
	</a>
	<small class="anwp-text-gray-600 anwp-mx-2 anwp-d-inline-block">|</small>
	<span class="anwp-text-gray-600"><?php echo esc_html__( 'How To\'s', 'anwp-football-leagues' ); ?></span>
</div>

<hr class="anwp-mb-3">

<div class="" style="max-width: 800px;">
	<?php echo esc_html__( 'Shortcode is a special "macros" that lets you insert specific content with very little effort.', 'anwp-football-leagues' ); ?>
	<br><?php echo esc_html__( 'Some recommended use cases are listed below.', 'anwp-football-leagues' ); ?>

	<h2 class="anwp-mt-5"><?php echo esc_html__( 'How to insert a shortcode into Gutenberg editor', 'anwp-football-leagues' ); ?></h2>
	<ul>
		<li> > <?php echo esc_html__( 'Create the shortcode with Shortcode Builder.', 'anwp-football-leagues' ); ?></li>
		<li> > <?php echo esc_html__( 'Copy and paste it into Shortcode block in the Gutenberg editor.', 'anwp-football-leagues' ); ?></li>
	</ul>
	<div class="fl-video-embed anwp-aspect-video anwp-border anwp-border-gray-300">
		<iframe src="https://www.youtube-nocookie.com/embed/oKVA0dkEFlk?rel=0" allowfullscreen></iframe>
	</div>

	<h2 class="anwp-mt-5"><?php echo esc_html__( 'How to use shortcode UI helper in Classic Editor', 'anwp-football-leagues' ); ?></h2>

	<ul>
		<li> > <?php echo esc_html__( 'Install', 'anwp-football-leagues' ); ?>
			<a href="https://wordpress.org/plugins/classic-editor/"><?php echo esc_html__( 'Classic Editor plugin', 'anwp-football-leagues' ); ?></a></li>
		<li> > <?php echo esc_html__( 'Click on Football Leagues button in the editor panel', 'anwp-football-leagues' ); ?></li>
		<li> > <?php echo esc_html__( 'Create and insert the shortcode', 'anwp-football-leagues' ); ?></li>
	</ul>
	<div class="fl-video-embed anwp-aspect-video anwp-border anwp-border-gray-300">
		<iframe src="https://www.youtube-nocookie.com/embed/wIUYXTQQP7w?rel=0" allowfullscreen></iframe>
	</div>


	<h2 class="anwp-mt-5"><?php echo esc_html__( 'How to use shortcode UI helper in Gutenberg Editor', 'anwp-football-leagues' ); ?></h2>

	<ul>
		<li> > <?php echo esc_html__( 'Add Classic block', 'anwp-football-leagues' ); ?></li>
		<li> > <?php echo esc_html__( 'Click on Football Leagues button in the editor panel', 'anwp-football-leagues' ); ?></li>
		<li> > <?php echo esc_html__( 'Create and insert the shortcode', 'anwp-football-leagues' ); ?></li>
	</ul>
	<div class="fl-video-embed anwp-aspect-video anwp-border anwp-border-gray-300">
		<iframe src="https://www.youtube-nocookie.com/embed/XDFCXtK7u0k?rel=0" allowfullscreen></iframe>
	</div>

	<h2 class="anwp-mt-5"><?php echo esc_html__( 'How to insert a shortcode into Elementor page builder', 'anwp-football-leagues' ); ?></h2>

	<ul>
		<li> > <?php echo esc_html__( 'Create the shortcode with Shortcode Builder.', 'anwp-football-leagues' ); ?></li>
		<li> > <?php echo esc_html__( 'Copy and paste it into Shortcode widget in the Elementor', 'anwp-football-leagues' ); ?></li>
	</ul>
	<div class="fl-video-embed anwp-aspect-video anwp-border anwp-border-gray-300">
		<iframe src="https://www.youtube-nocookie.com/embed/krjHC0Odee0?rel=0" allowfullscreen></iframe>
	</div>
</div>

