<?php

if (!defined('ABSPATH')) exit; // Exit if accessed directly

$action  = (isset($_GET['action'])) ? sanitize_text_field($_GET['action']) : '';
$heading = '';
$id      = (isset($_GET['portfolio'])) ? absint(intval($_GET['portfolio'])) : null;

$prg_options = array(
	'columns_count'             => '3',
	'accordion_number'          => 1,
	'prg_view_type'             => 'grid',
	"show_prg_title"            => "on",
	"show_prg_desc"             => "on",
	"image_sizes"               => "full_size",
	"show_project_title"        => "on",
	"show_project_title_on"     => "image_hover",
	"prg_images_loading"        => "all_loaded",
	"images_fit"                => "contain",
    'show_project_name' 		=> "on",
	'show_project_description' 	=> "on",
    "portfolio_name_transform"  => "none",
);
$portfolio   = array(
	"id"          => "",
	"name"        => __("Demo name", 'portfolio-responsive-gallery'),
	"description" => __("Demo description", 'portfolio-responsive-gallery'),
	"options"     => json_encode($prg_options, true),
);

switch ( $action ) {
	case 'add':
		$heading              = __('Add new portfolio', 'portfolio-responsive-gallery');
		$portfolio_attributes = $this->portfolio_obj->get_portfolio_attributes_for_projects();
		break;
	case 'edit':
		$heading              = __('Edit portfolio', 'portfolio-responsive-gallery');
		$portfolio            = $this->portfolio_obj->get_portfolio_by_id($id);
		$portfolio_items      = $this->portfolio_obj->get_projects_by_portfolio_id($id);
		$portfolio_attributes = $this->portfolio_obj->get_portfolio_attributes_for_projects();
		break;
    default:
        break;
}

if (isset($_POST["ays-submit"]) || isset($_POST["ays-submit-top"])) {
	$this->portfolio_obj->add_or_edit_portfolio($_POST, $id);
}

if (isset($_POST["ays-apply"]) || isset($_POST["ays-apply-top"])) {
	$this->portfolio_obj->add_or_edit_portfolio($_POST, $id, "apply");
}

$prg_options = json_decode($portfolio['options'], true);

$projects_id = array();
if ($id != null) {
	if (isset($portfolio_items)) {
		foreach ( $portfolio_items as $key => $project ) {
			$projects_id[] = $project['id'];
		}
	}
}

$projects_id = implode('***', $projects_id);

if ($prg_options['accordion_number'] == null || !isset($prg_options['accordion_number'])) {
	$accordion_number = 1;
} else {
	$accordion_number = $prg_options['accordion_number'];
}

//show project headers

$prg_options['show_project_name'] = (isset($prg_options['show_project_name']) && $prg_options['show_project_name'] != '') ? $prg_options['show_project_name'] : 'on';
$show_project_name = (isset($prg_options['show_project_name']) && $prg_options['show_project_name'] == 'on') ? true : false;

$prg_options['show_project_description'] = (isset($prg_options['show_project_description']) && $prg_options['show_project_description'] != '') ? $prg_options['show_project_description'] : 'on';
$show_project_description = (isset($prg_options['show_project_description']) && $prg_options['show_project_description'] == 'on') ? true : false;

$image_sizes = $this->ays_get_all_image_sizes();

$loader_iamge = "<span class='display_none ays_prg_loader_box'><img src='" . esc_url( AYS_PRG_ADMIN_URL . '/images/loaders/loading.gif' ) . "'></span>";

$portfolio_name_transform = (isset($prg_options['portfolio_name_transform']) && $prg_options['portfolio_name_transform'] != '') ? stripslashes(sanitize_text_field($prg_options['portfolio_name_transform'])) : "none";
?>

<div class="wrap">
    <div class="container-fluid">
        <form id="ays-portfolio-form" method="post">
            <input type="hidden" id="ays_submit_name">
            <h1 class="wp-heading-inline">
				<?php echo esc_html( $heading ); ?>
                
                <input type="submit" name="ays-submit-top" class="ays-submit action-button button-primary ays-prg-save-comp" value="<?php echo esc_attr__("Save and close", 'portfolio-responsive-gallery');?>" prg_submit_name="ays-submit" />

                <input type="submit" name="ays-apply-top" class="ays-submit action-button button ays-prg-save-comp" id="ays-button-top-apply" title="Ctrl + s" data-toggle="tooltip" data-delay='{"show":"1000"}' value="<?php echo esc_attr__("Save", 'portfolio-responsive-gallery'); ?>" prg_submit_name="ays-apply"/>
                <?php echo $loader_iamge; ?>

            </h1>
            <?php if($id !== null): ?>
            <div class="row">
                <div class="col-sm-3">
                    <label> <?php echo esc_html__( "Shortcode text for editor", 'portfolio-responsive-gallery' ); ?> </label>
                </div>
                <div class="col-sm-9">
                    <p style="font-size:14px; font-style:italic;">
                        <?php echo esc_html__("To insert the Portfolio into a page, post or text widget, copy shortcode", 'portfolio-responsive-gallery'); ?>
                        <strong class="ays-portfolio-shortcode-box" onClick="selectElementContents(this)" data-toggle="tooltip" title="<?php echo esc_attr__('Click for copy.', 'portfolio-responsive-gallery');?>" style="font-size:16px; font-style:normal;"><?php echo esc_html("[portfolio_responsive_gallery id=".$id."]"); ?></strong>
                        <?php echo " " . esc_html__( "and paste it at the desired place in the editor.", 'portfolio-responsive-gallery'); ?>
                    </p>
                </div>
            </div>
            <?php endif;?>
            <div class="nav-tab-wrapper">
                <a href="#tab1" class="nav-tab nav-tab-active"><?php echo esc_html__("Projects", 'portfolio-responsive-gallery'); ?></a>
                <a href="#tab2" class="nav-tab"><?php echo esc_html__("Portfolio Settings", 'portfolio-responsive-gallery'); ?></a>
                <a href="#tab3" class="nav-tab"><?php echo esc_html__("Project Settings", 'portfolio-responsive-gallery'); ?></a>
            </div>
            <div id="tab1" class="ays-portfolio-tab-content ays-portfolio-tab-content-active">
                <br>
                <div class="form-group row">
                    <div class="col-sm-3">
                        <label for="portfolio_name"><?php echo esc_html__("Portfolio Name", 'portfolio-responsive-gallery'); ?></label>
                    </div>
                    <div class="col-sm-9">
                        <input type="text" required name="portfolio_name" id="portfolio_name" class="ays-text-input"
                               placeholder="<?php echo esc_attr__("Portfolio Name", 'portfolio-responsive-gallery'); ?>"
                               value="<?php echo esc_attr(stripslashes($portfolio["name"])); ?>"/>
                    </div>
                </div>
                <hr/>
                <div class="ays-field">
                    <label for="portfolio_description"><?php echo esc_html__("Portfolio Description", 'portfolio-responsive-gallery'); ?></label>
					<?php

					$portfolio_desc           = stripslashes(($portfolio['description']));
					$portfolio_desc_editor_id = 'portfolio_description';
					$portfolio_desc_settings  = array(
						'editor_height' => '150',
						'textarea_name' => 'portfolio_description',
						'editor_class'  => 'ays-textarea',
						'media_buttons' => false
					);
					wp_editor($portfolio_desc, $portfolio_desc_editor_id, $portfolio_desc_settings);
					?>
                </div>
                <hr/>
                <p class="ays-subtitle"><?php echo esc_html__('Add Project', 'portfolio-responsive-gallery'); ?></p>
                <h6><?php echo esc_html('Create your portfolio projects', 'portfolio-responsive-gallery'); ?></h6>
                <button class="ays-add-project button"><?php echo esc_html__("Add project +", 'portfolio-responsive-gallery'); ?></button>
                <button type="button"
                        class="ays_clear_projects button"><?php echo esc_html__("Delete all projects", 'portfolio-responsive-gallery'); ?></button>
                <hr/>

                <input type="hidden" id="accordion_number" name="ays_accordion_number"
                       value="<?php echo esc_attr( $accordion_number ); ?>">
                <input type="hidden" name="ays_project_add_id" id="ays_project_add_id" value='0'>
                <input type="hidden" name="ays_project_update_id" id="ays_project_update_id"
                       value="<?php echo esc_attr( $projects_id ); ?>">
                <input type="hidden" name="ays_project_delete_id" id="ays_project_delete_id" value="">
                <ul class="acordion-el-for-clone">
                    <li data-hamar="0">
                        <input type="hidden" data-new="0" class="ays_project_action" name="ays_project_action[]"
                               value="insert">
                        <input type="checkbox" class="ays_li_collapse" checked>
                        <i class="fas fa-trash-alt ays-delete-project"></i>
                        <i class="fas fa-arrows-alt ays-move-images"></i>
                        <i class="fas fa-angle-down ays-animated-arrow"></i>
                        <div class="ays_project_main_img">
                            <input type="hidden" name="ays_project_main_image_path[]">
                            <img class="ays_project_main_image_path">
                        </div>
                        <div class="ays_project_name"><p><?php echo esc_html__("No name", 'portfolio-responsive-gallery'); ?></p></div>
                        <div class="ays-project-fields">
                            <div class="nav-tab-wrapper">
                                <a href="#ays_project0_tab1" tabindex="0"
                                   class="nav-tab nav-tab-active"><?php echo esc_html__("General", 'portfolio-responsive-gallery'); ?></a>
                                <a href="#ays_project0_tab2" tabindex="1"
                                   class="nav-tab"><?php echo esc_html__("Options", 'portfolio-responsive-gallery'); ?></a>
                                <a href="#ays_project0_tab3" tabindex="2"
                                   class="nav-tab"><?php echo esc_html__("Attributes", 'portfolio-responsive-gallery'); ?></a>
                            </div>
                            <div class="ays_project_fields">
                                <div class="ays_project_fields_tab">
                                    <div id="ays_project0_tab1"
                                         class="ays-project-attributes-content ays-project-attributes-content-active">
                                        <div class="ays_project_images">
                                            <div style="border-right: 1px solid #ccc; margin-right:10px; padding:10px; max-height: 120px; max-width:120px;">
                                                <input type="hidden" name="ays_project_main_img[]"
                                                       class="ays_project_main_img_hi" data-required="true">
                                                <div class="ays_project_main_image_div">
                                                    <div class="ays_project_main_image_add_icon"><i
                                                                class="fas fa-plus ays-upload-btn"></i></div>
                                                    <img class="ays_project_main_image_path">
                                                </div>
                                                <p style="font-size:12px; color:grey; font-style:italic;">
                                                    <?php echo esc_html__("Select project main image", 'portfolio-responsive-gallery'); ?>
                                                </p>
                                            </div>
                                            <div class="ays_project_images_div">
                                                <div class="ays_project_add_images_div">
                                                    <div class="ays_project_images_add_icon"><i
                                                                class="fas fa-plus ays-upload-btn"></i></div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="ays_project_attr">
                                            <p></p>
                                            <div class="ays_image_attr_item form-group row">
                                                <div class="col-sm-3">
                                                    <label><?php echo esc_html__("Project name", 'portfolio-responsive-gallery'); ?></label>
                                                </div>
                                                <div class="col-sm-9">
                                                    <input class="ays-text-input ays_project_name_input" type="text"
                                                           name="ays_project_name[]"
                                                           placeholder="<?php echo esc_attr__("Project name", 'portfolio-responsive-gallery'); ?>"/>
                                                </div>
                                            </div>
                                            <hr/>
                                            <div class="ays_image_attr_item form-group row" >
                                                <div class="col-sm-3">
                                                    <label><?php echo esc_html__("Project description", 'portfolio-responsive-gallery'); ?></label>
                                                </div>
                                                <div class="col-sm-9 replacable">
													<?php
													$project_desc           = '';
													$project_desc_editor_id = 'project_desc';
													$qt                     = array(
														'id'      => $project_desc_editor_id,
														'buttons' => 'strong,em,link,block,del,ins,img,ul,ol,li,code,more,close',
													);
													$tinymce_buttons        = array(
														'toolbar1' => "formatselect,bold,italic,blockquote,alignleft,aligncenter,alignright,link,wp_more,spellchecker,wp_adv",
														'toolbar2' => "strikethrough,hr,forecolor,pastetext,removeformat,charmap,outdent,indent,undo,redo,wp_help",
													);
													$project_desc_settings  = array(
														'editor_height'       => '140',
														'textarea_name'       => 'ays_project_description[]',
														'editor_class'        => 'ays-textarea',
														'media_buttons'       => false,
														'wpautop'             => true,
														'teeny'               => false,
														'dfw'                 => true,
														'_content_editor_dfw' => true,
														'tinymce'             => $tinymce_buttons,
														'quicktags'           => $qt,
													);
													wp_editor($project_desc, $project_desc_editor_id, $project_desc_settings);
													?>
                                                </div>
                                            </div>
                                            <hr/>
                                            <div class="ays_image_attr_item form-group row">
                                                <div class="col-sm-3">
                                                    <label><?php echo esc_html__("Project url", 'portfolio-responsive-gallery'); ?></label>
                                                </div>
                                                <div class="col-sm-9">
                                                    <input class="ays-text-input" type="url" name="ays_project_url[]"
                                                           placeholder="<?php echo esc_attr__("Project url", 'portfolio-responsive-gallery'); ?>"/>
                                                </div>
                                            </div>
                                            <hr>
                                            <div class="ays_image_attr_item form-group row" style="margin:0;">
                                                <div class="col-sm-12 only_pro">
                                                    <div class="pro_features">
                                                        <div>
                                                            <p>
                                                            <?php echo esc_html__("This feature is available only in ", 'portfolio-responsive-gallery'); ?>
                                                                <a href="https://ays-pro.com/wordpress/portfolio-responsive-gallery" target="_blank" title="PRO feature"><?php echo esc_html__("PRO version!!!", 'portfolio-responsive-gallery'); ?></a>
                                                            </p>
                                                        </div>
                                                    </div>
                                                    <!-- Audio load start -->
                                                    <div class="form-group row">
                                                        <div class="col-sm-3">
                                                            <label><?php echo esc_html__("Project Audio", 'portfolio-responsive-gallery'); ?></label>
                                                        </div>
                                                        <div class="col-sm-9 ays_project_sount_conts">
                                                            <div>
                                                                <a class="ays-add-project-bg-music" href="javascript:void(0);"><?php echo esc_html__("Select music", 'portfolio-responsive-gallery'); ?></a>
                                                            </div>
                                                            <div>
                                                                <audio controls src="" class="ays_sound_audio"></audio>
                                                                <input type="hidden" name="ays_project_bg_music[]" class="ays_project_bg_music" value="">
                                                            </div>
                                                            <div>
                                                                <i class="fas fa-trash-alt ays_delete_sound"></i>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <!-- Audio load end -->
                                                </div>
                                            </div>
                                            <input type="hidden" name="ays_project_date[]" class="ays_project_date"/>
                                        </div>
                                    </div>
                                </div>
                                <div class="ays_project_fields_tab">
                                    <div id="ays_project0_tab2" class="ays-project-attributes-content">
                                        <div class="ays_project_options_content">
                                            <h6><?php echo esc_html__('Set your project options', 'portfolio-responsive-gallery'); ?></h6>
                                            <hr/>
                                            <div class="form-group row">
                                                <div class="col-sm-3">
                                                    <label><?php echo esc_html__("Open URL in new tab", 'portfolio-responsive-gallery'); ?></label>
                                                </div>
                                                <div class="col-sm-9">
                                                    <label>
                                                        <input class="ays_project_url_open_js" type="checkbox"
                                                               name="ays_project_url_open[]"/>
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="ays_project_fields_tab">
                                    <div id="ays_project0_tab3" class="ays-project-attributes-content">
                                        <div class="ays_project_options_content ays_project_attributes_content">
                                            <h6><?php echo esc_html__('Set your project attributes', 'portfolio-responsive-gallery'); ?></h6>
                                            <hr/>
											<?php
											if (isset($portfolio_attributes)) {
												foreach ( $portfolio_attributes as $key => $attribute ):
													?>
													<?php
													if ($attribute['type'] == "textarea"):
														?>
                                                        <div class="form-group row">
                                                            <div class="col-sm-3">
                                                                <label><?php echo esc_html( $attribute['name'] ); ?></label>
                                                            </div>
                                                            <div class="col-sm-9">
                                                                <textarea name="<?php echo esc_attr( $attribute['slug'] ); ?>[]" class="ays-textarea"></textarea>
                                                            </div>
                                                        </div>
                                                        <hr/>
													<?php
													else:
														?>
                                                        <div class="form-group row">
                                                            <div class="col-sm-3">
                                                                <label><?php echo  esc_html( $attribute['name'] ); ?></label>
                                                            </div>
                                                            <div class="col-sm-9">
                                                                <input class="ays-text-input"
                                                                       type="<?php echo esc_attr( $attribute['type'] ); ?>"
                                                                       name="<?php echo esc_attr( $attribute['slug'] ); ?>[]"/>
                                                            </div>
                                                        </div>
                                                        <hr/>
													<?php
													endif;
												endforeach;
											}
											?>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
                <ul class="ays-accordion">
					<?php
					if ($id == null):
						?>
                        <li data-hamar="0">
                            <input type="hidden" data-new="0" class="ays_project_action" name="ays_project_action[]"
                                   value="insert">
                            <input type="checkbox" class="ays_li_collapse" checked>
                            <i class="fas fa-trash-alt ays-delete-project"></i>
                            <i class="fas fa-arrows-alt ays-move-images"></i>
                            <i class="fas fa-angle-down ays-animated-arrow"></i>
                            <div class="ays_project_main_img">
                                <input type="hidden" name="ays_project_main_image_path[]">
                                <img class="ays_project_main_image_path">
                            </div>
                            <div class="ays_project_name"><p>No name</p></div>
                            <div class="ays-project-fields">
                                <div class="nav-tab-wrapper">
                                    <a href="#ays_project0_tab1" tabindex="0"
                                       class="nav-tab nav-tab-active"><?php echo esc_html__("General", 'portfolio-responsive-gallery'); ?></a>
                                    <a href="#ays_project0_tab2" tabindex="1"
                                       class="nav-tab"><?php echo esc_html__("Options", 'portfolio-responsive-gallery'); ?></a>
                                    <a href="#ays_project0_tab3" tabindex="2"
                                       class="nav-tab"><?php echo esc_html__("Attributes", 'portfolio-responsive-gallery'); ?></a>
                                </div>
                                <div class="ays_project_fields">
                                    <div class="ays_project_fields_tab">
                                        <div id="ays_project0_tab1"
                                             class="ays-project-attributes-content ays-project-attributes-content-active">
                                            <div class="ays_project_images">
                                                <div style="border-right: 1px solid #ccc; margin-right:10px; padding:10px; max-height: 120px; max-width:120px;">
                                                    <input type="hidden" name="ays_project_main_img[]"
                                                           class="ays_project_main_img_hi" data-required="true">
                                                    <div class="ays_project_main_image_div">
                                                        <div class="ays_project_main_image_add_icon"><i
                                                                    class="fas fa-plus ays-upload-btn"></i></div>
                                                        <img class="ays_project_main_image_path">
                                                    </div>
                                                    <p style="font-size:12px; color:grey; font-style:italic;"><?php echo esc_html__("Select project main image", 'portfolio-responsive-gallery'); ?></p>
                                                </div>
                                                <div class="ays_project_images_div">
                                                    <div class="ays_project_add_images_div">
                                                        <div class="ays_project_images_add_icon"><i class="fas fa-plus ays-upload-btn"></i></div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="ays_project_attr">
                                                <p></p>
                                                <div class="ays_image_attr_item form-group row">
                                                    <div class="col-sm-3">
                                                        <label><?php echo esc_html__("Project name", 'portfolio-responsive-gallery'); ?></label>
                                                    </div>
                                                    <div class="col-sm-9">
                                                        <input class="ays-text-input ays_project_name_input" type="text"
                                                               name="ays_project_name[]"
                                                               placeholder="<?php echo esc_attr__("Project name", 'portfolio-responsive-gallery'); ?>"/>
                                                    </div>
                                                </div>
                                                <hr/>
                                                <div class="ays_image_attr_item form-group row">
                                                    <div class="col-sm-3">
                                                        <label><?php echo esc_html__("Project description", 'portfolio-responsive-gallery'); ?></label>
                                                    </div>
                                                    <div class="col-sm-9 replacable">
														<?php

														$project_desc           = '';
														$project_desc_editor_id = 'project_desc0';
														$qt                     = array(
															'id'      => $project_desc_editor_id,
															'buttons' => 'strong,em,link,block,del,ins,img,ul,ol,li,code,more,close',
														);
														$tinymce_buttons        = array(
															'toolbar1' => "formatselect,bold,italic,blockquote,alignleft,aligncenter,alignright,link,wp_more,spellchecker,wp_adv",
															'toolbar2' => "strikethrough,hr,forecolor,pastetext,removeformat,charmap,outdent,indent,undo,redo,wp_help",
														);
														$project_desc_settings  = array(
															'editor_height'       => '140',
															'textarea_name'       => 'ays_project_description[]',
															'editor_class'        => 'ays-textarea',
															'media_buttons'       => false,
															'wpautop'             => true,
															'teeny'               => false,
															'dfw'                 => true,
															'_content_editor_dfw' => true,
															'tinymce'             => $tinymce_buttons,
															'quicktags'           => $qt,
														);
														wp_editor($project_desc, $project_desc_editor_id, $project_desc_settings);
														?>
                                                    </div>
                                                </div>
                                                <hr/>
                                                <div class="ays_image_attr_item form-group row">
                                                    <div class="col-sm-3">
                                                        <label><?php echo esc_html__("Project url", 'portfolio-responsive-gallery'); ?></label>
                                                    </div>
                                                    <div class="col-sm-9">
                                                        <input class="ays-text-input" type="url"
                                                               name="ays_project_url[]"
                                                               placeholder="<?php echo esc_attr__("Project url", 'portfolio-responsive-gallery'); ?>"/>
                                                    </div>
                                                </div>
                                                <hr>
                                                <div class="ays_image_attr_item form-group row" style="margin:0;">
                                                    <div class="col-sm-12 only_pro">
                                                        <div class="pro_features">
                                                            <div>
                                                                <p>
                                                                <?php echo esc_html__("This feature is available only in ", 'portfolio-responsive-gallery'); ?>
                                                                    <a href="https://ays-pro.com/wordpress/portfolio-responsive-gallery" target="_blank" title="PRO feature"><?php echo esc_html__("PRO version!!!", 'portfolio-responsive-gallery'); ?></a>
                                                                </p>
                                                            </div>
                                                        </div>
                                                        <!-- Audio load start -->
                                                        <div class="form-group row">
                                                            <div class="col-sm-3">
                                                                <label><?php echo esc_html__("Project Audio", 'portfolio-responsive-gallery'); ?></label>
                                                            </div>
                                                            <div class="col-sm-9 ays_project_sount_conts">
                                                                <div>
                                                                    <a class="ays-add-project-bg-music" href="javascript:void(0);"><?php echo esc_html__("Select music", 'portfolio-responsive-gallery'); ?></a>
                                                                </div>
                                                                <div>
                                                                    <audio controls src="" class="ays_sound_audio"></audio>
                                                                    <input type="hidden" name="ays_project_bg_music[]" class="ays_project_bg_music" value="">
                                                                </div>
                                                                <div>
                                                                    <i class="fas fa-trash-alt ays_delete_sound"></i>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <!-- Audio load end -->
                                                    </div>
                                                </div>
                                                <input type="hidden" name="ays_project_date[]"
                                                       class="ays_project_date"/>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="ays_project_fields_tab">
                                        <div id="ays_project0_tab2" class="ays-project-attributes-content">
                                            <div class="ays_project_options_content">
                                                <h6><?php echo esc_html__('Set your project options', 'portfolio-responsive-gallery'); ?></h6>
                                                <hr/>
                                                <div class="form-group row">
                                                    <div class="col-sm-3">
                                                        <label for = "ays_project_url_open0"><?php echo esc_html__("Open URL in new tab", 'portfolio-responsive-gallery'); ?></label>
                                                    </div>
                                                    <div class="col-sm-9">
                                                        <label>
                                                            <input  id = "ays_project_url_open0" class="ays_project_url_open_js" type="checkbox"
                                                                   name="ays_project_url_open[]"/>
                                                        </label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="ays_project_fields_tab">
                                        <div id="ays_project0_tab3" class="ays-project-attributes-content">
                                            <div class="ays_project_options_content ays_project_attributes_content">
                                                <h6><?php echo esc_html__('Set your project attributes', 'portfolio-responsive-gallery'); ?></h6>
                                                <hr/>
												<?php
												if (isset($portfolio_attributes)) {
													foreach ( $portfolio_attributes as $key => $attribute ):
														?>
														<?php
														if ($attribute['type'] == "textarea"):
															?>
                                                            <div class="form-group row">
                                                                <div class="col-sm-3">
                                                                    <label><?php echo esc_html( $attribute['name'] ); ?></label>
                                                                </div>
                                                                <div class="col-sm-9">
                                                                    <textarea name="<?php echo esc_attr( $attribute['slug'] ); ?>[]"
                                                                              class="ays-textarea"></textarea>
                                                                </div>
                                                            </div>
                                                            <hr/>
														<?php
														else:
															?>
                                                            <div class="form-group row">
                                                                <div class="col-sm-3">
                                                                    <label><?php echo esc_html( $attribute['name'] ); ?></label>
                                                                </div>
                                                                <div class="col-sm-9">
                                                                    <input class="ays-text-input"
                                                                           type="<?php echo esc_attr( $attribute['type'] ); ?>"
                                                                           name="<?php echo esc_attr( $attribute['slug'] ); ?>[]"/>
                                                                </div>
                                                            </div>
                                                            <hr/>
														<?php
														endif;
													endforeach;
												}
												?>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
					<?php
					else:
						$project_i = 0;
						if (isset($portfolio_items)) {
							foreach ( $portfolio_items as $key => $project ) {
								$project_options    = json_decode($project["options"], true);
								$project_attributes = json_decode($project['attributes'], true);
								$project_images     = ($project["images"] == null || $project["images"] == '') ? [] : explode('***', $project["images"]);
								?>
                                <li data-hamar="<?php echo esc_attr( $project_i ); ?>">
                                    <input type="hidden" data-new="0" class="ays_project_action"
                                           name="ays_project_action[]"
                                           value="update">
                                    <input type="checkbox" class="ays_li_collapse" checked>
                                    <i class="fas fa-trash-alt ays-delete-project"
                                       row-id="<?php echo esc_attr( $project['id'] ); ?>"></i>
                                    <i class="fas fa-arrows-alt ays-move-images"></i>
                                    <i class="fas fa-angle-down ays-animated-arrow"></i>
                                    <div class="ays_project_main_img" style="background-image:none;">
                                        <input type="hidden" name="ays_project_main_image_path[]"
                                               value="<?php echo esc_attr( $project['main_image'] ); ?>">
                                        <img class="ays_project_main_image_path" <?php echo  $project['main_image'] == '' ? '' : "src='" . esc_url( $project['main_image'] ) . "'"; ?>>
                                    </div>
                                    <div class="ays_project_name">
                                        <p>
                                            <?php 
                                            if ( $project['name'] == '' ) {
                                                echo esc_html__( 'No name', 'portfolio-responsive-gallery' );
                                            } else {
                                                echo esc_html( $project['name'] );
                                            } 
                                            ?>
                                        </p>
                                    </div>
                                    <div class="ays-project-fields">
                                        <div class="nav-tab-wrapper">
                                            <a href="<?php echo esc_url( '#ays_project' . $project_i . '_tab1' ); ?>" tabindex="0" class="nav-tab nav-tab-active"><?php echo esc_html__("General", 'portfolio-responsive-gallery'); ?></a>
                                            <a href="<?php echo esc_url( '#ays_project' . $project_i . '_tab2' ); ?>" tabindex="1" class="nav-tab"><?php echo esc_html__("Options", 'portfolio-responsive-gallery'); ?></a>
                                            <a href="<?php echo esc_url( '#ays_project' . $project_i . '_tab3' ); ?>" tabindex="2" class="nav-tab"><?php echo esc_html__("Attributes", 'portfolio-responsive-gallery'); ?></a>
                                        </div>
                                        <div class="ays_project_fields">
                                            <div class="ays_project_fields_tab">
                                                <div id="<?php echo esc_attr( 'ays_project' . $project_i . '_tab1' ); ?>"
                                                     class="ays-project-attributes-content ays-project-attributes-content-active">
                                                    <div class="ays_project_images">
                                                        <div style="border-right: 1px solid #ccc; margin-right:10px; padding:10px; max-height: 120px; max-width:120px;">
                                                            <input type="hidden" name="ays_project_main_img[]"
                                                                   class="ays_project_main_img_hi"
                                                                   value="<?php echo esc_attr( $project['main_image'] ); ?>"
                                                                   data-required="true">
                                                            <div class="ays_project_main_image_div"
                                                                 style="background-image:none;">
																<?php if ( $project['main_image'] == '' ) : ?>
                                                                    <div class="ays_project_main_image_add_icon"><i
                                                                                class="fas fa-plus ays-upload-btn"></i>
                                                                    </div>
																<?php endif; ?>
                                                                <?php if ( $project['main_image'] != '' ) : ?>
                                                                    <img class="ays_project_main_image_path" 
                                                                         src="<?php echo esc_url( $project['main_image'] ); ?>" />
                                                                <?php endif; ?>
                                                                <div class="ays_image_thumb" <?php echo $project['main_image'] == '' ? 'style="display:none"' : ''; ?>>
                                                                    <div class="ays_image_edit_div"><i
                                                                                class="fas fa-pencil-alt ays_image_edit"></i>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <p style="font-size:12px; color:grey; font-style:italic;"><?php echo esc_html__("Select project main image", 'portfolio-responsive-gallery'); ?> </p>
                                                        </div>
                                                        <div class="ays_project_images_div">
															<?php
															foreach ( $project_images as $i => $image ):
																?>
                                                                <div class="ays_project_add_image_div"
                                                                     style="background-image:none;">
                                                                    <img class="ays_project_images_path"
                                                                         src="<?php echo esc_url( $image ); ?>">
                                                                    <input type="hidden"
                                                                        name="ays_project_images[<?php echo esc_attr( $project_i ); ?>][]"
                                                                        class="ays_project_images_hi"
                                                                        value="<?php echo esc_attr( $image ); ?>">
                                                                    <div class="ays_image_thumb">
                                                                        <div class="ays_image_edit_div"><i
                                                                                    class="fas fa-pencil-alt ays_image_edit"></i>
                                                                        </div>
                                                                    </div>
                                                                    <button type="button"
                                                                            class="ays_delete_image button">
                                                                        x
                                                                    </button>
                                                                </div>
															<?php
															endforeach;
															?>
                                                            <div class="ays_project_add_images_div">
                                                                <div class="ays_project_images_add_icon"><i
                                                                            class="fas fa-plus ays-upload-btn"></i>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="ays_project_attr">
                                                        <p></p>
                                                        <div class="ays_image_attr_item form-group row">
                                                            <div class="col-sm-3">
                                                                <label><?php echo esc_html__("Project name", 'portfolio-responsive-gallery'); ?></label>
                                                            </div>
                                                            <div class="col-sm-9">
                                                                <input class="ays-text-input ays_project_name_input"
                                                                       type="text" name="ays_project_name[]"
                                                                       placeholder="<?php echo esc_attr__("Project name", 'portfolio-responsive-gallery'); ?>"
                                                                       value="<?php echo esc_attr(stripslashes($project['name'])); ?>"/>
                                                            </div>
                                                        </div>
                                                        <hr/>
                                                        <div class="ays_image_attr_item form-group row">
                                                            <div class="col-sm-3">
                                                                <label><?php echo esc_html__("Project description", 'portfolio-responsive-gallery'); ?></label>
                                                            </div>
                                                            <div class="col-sm-9 replacable">
																<?php

																$project_desc           = stripslashes($project['description']);
																$project_desc_editor_id = 'project_desc' . $project_i;
																$qt                     = array(
																	'id'      => $project_desc_editor_id,
																	'buttons' => 'strong,em,link,block,del,ins,img,ul,ol,li,code,more,close',
																);
																$tinymce_buttons        = array(
																	'toolbar1' => "formatselect,bold,italic,blockquote,alignleft,aligncenter,alignright,link,wp_more,spellchecker,wp_adv",
																	'toolbar2' => "strikethrough,hr,forecolor,pastetext,removeformat,charmap,outdent,indent,undo,redo,wp_help",
																);
																$project_desc_settings  = array(
																	'editor_height'       => '140',
																	'textarea_name'       => 'ays_project_description[]',
																	'editor_class'        => 'ays-textarea',
																	'media_buttons'       => false,
																	'wpautop'             => true,
																	'teeny'               => false,
																	'dfw'                 => true,
																	'_content_editor_dfw' => true,
																	'tinymce'             => $tinymce_buttons,
																	'quicktags'           => $qt,
																);
																wp_editor($project_desc, $project_desc_editor_id, $project_desc_settings);
																?>
                                                            </div>
                                                        </div>
                                                        <hr/>
                                                        <div class="ays_image_attr_item form-group row">
                                                            <div class="col-sm-3">
                                                                <label><?php echo esc_html__("Project url", 'portfolio-responsive-gallery'); ?></label>
                                                            </div>
                                                            <div class="col-sm-9">
                                                                <input class="ays-text-input" type="url"
                                                                       name="ays_project_url[]"
                                                                       placeholder="<?php echo esc_attr__("Project url", 'portfolio-responsive-gallery'); ?>"
                                                                       value="<?php echo isset( $project['project_url'] ) ? esc_attr( $project['project_url'] ) : ""; ?>"/>
                                                            </div>
                                                        </div>
                                                        <hr>
                                                        <div class="ays_image_attr_item form-group row" style="margin:0;">
                                                            <div class="col-sm-12 only_pro">
                                                                <div class="pro_features">
                                                                    <div>
                                                                        <p>
                                                                        <?php echo esc_html__("This feature is available only in ", 'portfolio-responsive-gallery'); ?>
                                                                            <a href="https://ays-pro.com/wordpress/portfolio-responsive-gallery" target="_blank" title="PRO feature"><?php echo esc_html__("PRO version!!!", 'portfolio-responsive-gallery'); ?></a>
                                                                        </p>
                                                                    </div>
                                                                </div>
                                                                <!-- Audio load start -->
                                                                <div class="form-group row">
                                                                    <div class="col-sm-3">
                                                                        <label><?php echo esc_html__("Project Audio", 'portfolio-responsive-gallery'); ?></label>
                                                                    </div>
                                                                    <div class="col-sm-9 ays_project_sount_conts">
                                                                        <div>
                                                                            <a class="ays-add-project-bg-music" href="javascript:void(0);"><?php echo esc_html__("Select music", 'portfolio-responsive-gallery'); ?></a>
                                                                        </div>
                                                                        <div>
                                                                            <audio controls src="" class="ays_sound_audio"></audio>
                                                                            <input type="hidden" name="ays_project_bg_music[]" class="ays_project_bg_music" value="">
                                                                        </div>
                                                                        <div>
                                                                            <i class="fas fa-trash-alt ays_delete_sound"></i>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <!-- Audio load end -->
                                                            </div>
                                                        </div>
                                                        <input type="hidden" name="ays_project_date[]"
                                                            class="ays_project_date" value="<?php echo isset( $project_options['project_date'] ) ? esc_attr( $project_options['project_date'] ) : ""; ?>"/>  
                                                    </div>
                                                </div>        
                                            </div>
                                            <div class="ays_project_fields_tab">
                                                <div id="ays_project<?php echo isset($project_i) ? esc_attr( $project_i ) : 999; ?>_tab2"
                                                     class="ays-project-attributes-content">
                                                    <div class="ays_project_options_content">
                                                        <h6><?php echo  esc_html__('Set your project options', 'portfolio-responsive-gallery'); ?></h6>
                                                        <hr/>
                                                        <div class="form-group row">
                                                            <div class="col-sm-3">
                                                                <label for = "ays_project_url_open<?php echo isset($project_i) ? esc_attr( $project_i ) : 999; ?>"><?php echo esc_html__("Open URL in new tab", 'portfolio-responsive-gallery'); ?></label>
                                                            </div>
                                                            <div class="col-sm-9">
                                                                <label>
                                                                    <input id = "ays_project_url_open<?php echo   isset($project_i) ? esc_attr( $project_i ): 999; ?>" class="ays_project_url_open_js" name = "ays_project_url_open[]"
                                                                           type="checkbox" <?php echo  (isset($project_options['url_open']) && $project_options['url_open'] == "on") ? "checked" : ""; ?> />
                                                                </label>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="ays_project_fields_tab">
                                                <div id="<?php echo esc_attr( 'ays_project' . $project_i . '_tab3' ); ?>"
                                                     class="ays-project-attributes-content">
                                                    <div class="ays_project_options_content ays_project_attributes_content">
                                                        <h6><?php echo esc_html__('Set your project attributes', 'portfolio-responsive-gallery'); ?></h6>
                                                        <hr/>
														<?php
														if (isset($portfolio_attributes)) {
															foreach ( $portfolio_attributes as $hamar => $attribute ):
																?>
																<?php
																if ($attribute['type'] == "textarea"):
																	?>
                                                                    <div class="form-group row">
                                                                        <div class="col-sm-3">
                                                                            <label><?php echo esc_html( $attribute['name'] ); ?></label>
                                                                        </div>
                                                                        <div class="col-sm-9">
                                                                            <textarea
                                                                                name="<?php echo esc_attr( $attribute['slug'] ); ?>[]"
                                                                                class="ays-textarea">
                                                                                <?php 
                                                                                    if ( isset( $project_attributes[$attribute['slug']] ) ) {
                                                                                        echo esc_html( stripslashes( $project_attributes[$attribute['slug']] ) );
                                                                                    } 
                                                                                ?>
                                                                            </textarea>
                                                                        </div>
                                                                    </div>
                                                                    <hr/>
																<?php
																else:
																	?>
                                                                    <div class="form-group row">
                                                                        <div class="col-sm-3">
                                                                            <label><?php echo esc_html( $attribute['name'] ); ?></label>
                                                                        </div>
                                                                        <div class="col-sm-9">
                                                                            <?php 
                                                                                $value = isset( $project_attributes[$attribute['slug']] ) ? stripslashes( $project_attributes[$attribute['slug']] ) : ''; 
                                                                            ?>
                                                                            <input class="ays-text-input"
                                                                                   type="<?php echo esc_attr( $attribute['type'] ); ?>"
                                                                                   name="<?php echo esc_attr( $attribute['slug'] ); ?>[]"
                                                                                   value="<?php echo esc_attr( $value ); ?>"/>
                                                                        </div>
                                                                    </div>
                                                                    <hr/>
																<?php
																endif;
															endforeach;
														}
														?>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </li>
								<?php
								$project_i ++;
							}
						}
					endif;
					?>
                </ul>

            </div>
            <div id="tab2" class="ays-portfolio-tab-content">
                <p class="ays-subtitle"><?php echo esc_html__('Set up your portfolio', 'portfolio-responsive-gallery'); ?></p>
                <h6><?php echo esc_html__('General options', 'portfolio-responsive-gallery'); ?></h6>
                <hr/>
                <div class="form-group row">
                    <div class="col-sm-3">
                        <label>
							<?php echo esc_html__("Show portfolio header", 'portfolio-responsive-gallery'); ?>
                            <a class="ays_help" data-toggle="tooltip"
                               title="<?php echo esc_attr__("You can decide whether to show the title and description of the portfolio or not", 'portfolio-responsive-gallery'); ?>">
                                <i class="fas fa-info-circle"></i>
                            </a>
                        </label>
                    </div>
                    <div class="col-sm-9">
                        <label class="ays_prg_image_hover_icon"><?php echo esc_html__("Show portfolio title ", 'portfolio-responsive-gallery'); ?>
                            <input type="checkbox" class=""
                                   name="ays_prg_title_show" <?php echo  (isset($prg_options['show_prg_title']) && $prg_options['show_prg_title'] == "on") ? "checked" : ""; ?>/>
                            <a class="ays_help poqr_tooltip" data-toggle="tooltip"
                               title="<?php echo esc_attr__("If it is marked it will show the title", 'portfolio-responsive-gallery'); ?>">
                                <i class="fas fa-info-circle"></i>
                            </a>
                        </label>
                        <label class="ays_prg_image_hover_icon"><?php echo esc_html__("Show portfolio description ", 'portfolio-responsive-gallery'); ?>
                            <input type="checkbox" class=""
                                   name="ays_prg_desc_show" <?php echo  (isset($prg_options['show_prg_title']) && $prg_options['show_prg_desc'] == "on") ? "checked" : ""; ?>/>
                            <a class="ays_help" data-toggle="tooltip"
                               title="<?php echo esc_attr__("If it is marked it will show the description", 'portfolio-responsive-gallery'); ?>">
                                <i class="fas fa-info-circle"></i>
                            </a>
                        </label>
                    </div>
                </div>
                <hr>
                <!-- Show Project header start -->
                <div class="form-group row">
                    <div class="col-sm-3">
                        <label>
							<?php echo esc_html__("Show project labels", 'portfolio-responsive-gallery'); ?>
                            <a class="ays_help" data-toggle="tooltip"
                               title="<?php echo esc_attr__("Show the name and description label next to the name and description written inside the project popup.", 'portfolio-responsive-gallery'); ?>">
                                <i class="fas fa-info-circle"></i>
                            </a>
                        </label>
                    </div>
                    <div class="col-sm-9">
                        <label class="ays_prg_image_hover_icon"><?php echo esc_html__("Name ", 'portfolio-responsive-gallery'); ?>
                            <input type="checkbox" class="" name="ays_prg_show_project_name" value='on' <?php echo $show_project_name ? 'checked' : '' ?>/>
                        </label>
                        <label class="ays_prg_image_hover_icon"><?php echo esc_html__("Description ", 'portfolio-responsive-gallery'); ?>
                            <input type="checkbox" class="" name="ays_prg_show_project_description" value='on' <?php echo $show_project_description ? 'checked' : '' ?>/>
                            </a>
                        </label>
                    </div>
                </div>
                <!-- Show Project header end -->
                <!-- Portfolio name transform -->
                 <hr>
                <div class="form-group row">
                    <div class="col-sm-3">
                        <label for="ays_portfolio_name_transform">
                            <?php echo esc_html__("Portfolio name text transform", 'portfolio-responsive-gallery'); ?>
                            <a class="ays_help" data-toggle="tooltip"
                               title='<?php echo esc_attr__('Specify the text transformation of the portfolio name that will be displayed,such as converting to uppercase or lowercase.', 'portfolio-responsive-gallery'); ?>'>
                                <i class="fas fa-info-circle"></i>
                            </a>
                        </label>
                    </div>
                    <div class="col-sm-9">
                        <select name="ays_portfolio_name_transform" id="ays_portfolio_name_transform">
                            <option value="none" <?php echo ($portfolio_name_transform == 'none') ? 'selected' : ''; ?>><?php echo esc_html__('Default','portfolio-responsive-gallery'); ?></option>
                            <option value="capitalize" <?php echo ($portfolio_name_transform == 'capitalize') ? 'selected' : ''; ?>><?php echo esc_html__('Capitalize','portfolio-responsive-gallery'); ?></option>
                            <option value="uppercase" <?php echo ($portfolio_name_transform == 'uppercase') ? 'selected' : ''; ?>><?php echo esc_html__('Uppercase','portfolio-responsive-gallery'); ?></option>
                            <option value="lowercase" <?php echo ($portfolio_name_transform == 'lowercase') ? 'selected' : ''; ?>><?php echo esc_html__('Lowercase','portfolio-responsive-gallery'); ?></option>
                        </select>
                    </div>
                </div>
                <!-- Projects main Image size -->
                <hr>
                <div class="form-group row">
                    <div class="col-sm-3">
                        <label for="ays_image_sizes">
							<?php echo esc_html__("Projects main image size", 'portfolio-responsive-gallery'); ?>
                            <a class="ays_help" data-toggle="tooltip"
                               title='<?php echo esc_attr__('The size of the project main image in portfolio. For optimize page speed recomended "Medium" or "Medium_large".', 'portfolio-responsive-gallery'); ?>'>
                                <i class="fas fa-info-circle"></i>
                            </a>
                        </label>
                    </div>
                    <div class="col-sm-9">                        
                        <select name="ays_image_sizes" id="ays_image_sizes">
                            <option value="full_size"><?php echo esc_html__( 'Full size', 'portfolio-responsive-gallery' ); ?></option>
                            <?php foreach ( $image_sizes as $key => $size ) : ?>
                                <option value="<?php echo esc_attr( $key ); ?>" <?php selected( $prg_options['image_sizes'], $key ); ?>>
                                    <?php
                                    $name = ucfirst( $key );
                                    echo esc_html( sprintf(
                                        /* translators: 1: size name, 2: width, 3: height */
                                        __( '%1$s (%2$sx%3$s)', 'portfolio-responsive-gallery' ),
                                        $name,
                                        $size['width'],
                                        $size['height']
                                    ) );
                                    ?>
                                </option>
                            <?php endforeach; ?>
                        </select>
                    </div>
                </div>
                <hr/>
                <div class="form-group row">
                    <div class="col-sm-3">
                        <label>
							<?php echo esc_html__("Images loading", 'portfolio-responsive-gallery'); ?>
                            <a class="ays_help" data-toggle="tooltip"
                               title="<?php echo esc_attr__("The images are loaded according to two principles: already loaded portfolio with images and at first opens portfolio after then the images", 'portfolio-responsive-gallery'); ?>">
                                <i class="fas fa-info-circle"></i>
                            </a>
                        </label>
                    </div>
                    <div class="col-sm-9">
                        <div>
                            <label class="ays_prg_image_hover_icon"><?php echo esc_html__("Global loading ", 'portfolio-responsive-gallery'); ?>
                                <input type="radio" class=""
                                       name="ays_images_loading" <?php echo  ((isset($prg_options['prg_images_loading']) && $prg_options['prg_images_loading'] != 'current_loaded') || !isset($prg_options['prg_images_loading'])) ? 'checked' : ""; ?>
                                       value="all_loaded"/>
                            </label>
                            <label class="ays_prg_image_hover_icon"><?php echo esc_html__("Lazy loading ", 'portfolio-responsive-gallery'); ?>
                                <input type="radio" class=""
                                       name="ays_images_loading" <?php echo  (isset($prg_options['prg_images_loading']) && $prg_options['prg_images_loading'] == 'current_loaded') ? 'checked' : ""; ?>
                                       value="current_loaded"/></label>
                        </div>
                    </div>
                </div>
                <hr/>
                <div class="form-group row">
                    <div class="col-sm-3">
                        <label for="ays-prg-width">
							<?php echo esc_html__("Portfolio Width", 'portfolio-responsive-gallery'); ?>
                            <a class="ays_help" data-toggle="tooltip"
                               title="<?php echo esc_attr__("This field shows the width of the Portfolio", 'portfolio-responsive-gallery'); ?>">
                                <i class="fas fa-info-circle"></i>
                            </a>
                        </label>
                    </div>
                    <div class="col-sm-9" style="display:flex;">
                        <div>
                            <input type="number" name="ays-prg-width" id="ays-prg-width"
                                value=<?php echo isset($prg_options['prg_width']) && $prg_options['prg_width'] > 0 ? esc_attr( $prg_options['prg_width'] ) : 0; ?>>
                            <span style="display:block;" class="ays_prg_image_hover_icon_text"><?php echo esc_html__("For 100% leave blank or 0", 'portfolio-responsive-gallery'); ?></span>
                        </div>
                        <div class="ays_dropdown_max_width with_left_margin">
                            <input type="text" value="px" class="ays-prg-hint-for-size" disabled="">
                        </div>
                    </div>
                </div>
                <hr/>
                <div class="form-group row">
                    <div class="col-sm-3">
                        <label for="ays-view-type">
							<?php echo esc_html__("Portfolio view type", 'portfolio-responsive-gallery'); ?>
                            <a class="ays_help" data-toggle="tooltip"
                               title="This section notes the view type of the Portfolio that is in what sequence should the pictures of projects be">
                                <i class="fas fa-info-circle"></i>
                            </a>
                        </label>
                    </div>
                    <div class="col-sm-3">
                        <div>
                            <select name="ays-view-type" id="ays-view-type">
                                <option value="grid" <?php echo isset($prg_options['prg_view_type']) && $prg_options['prg_view_type'] == 'mosaic' ? "selected" : ""; ?>>
                                    Grid
                                </option>
                                <!-- <option value="mosaic" <? //=isset($prg_options['prg_view_type']) && $prg_options['prg_view_type'] == 'mosaic' ? "selected" : "";?>>
                                    Mosaic
                                </option> -->
                            </select>
                        </div>
                    </div>
                    <div id="ays-columns-count" class="col-sm-6 row">
                        <div class="col-sm-4">
                            <label for="ays-columns-count-input" >
								<?php echo esc_html__("Columns count", 'portfolio-responsive-gallery'); ?>
                                <a class="ays_help" data-toggle="tooltip"
                                   title="<?php echo esc_attr__("The counts of the columns of the Portfolio", 'portfolio-responsive-gallery'); ?>">
                                    <i class="fas fa-info-circle"></i>
                                </a>
                            </label>
                        </div>
                        <div class="col-sm-8">
                            <input type="number" name="ays-columns-count" id="ays-columns-count-input" class="ays-text-input ays-text-input-short"
                                   placeholder="<?php echo esc_attr__("Default", 'portfolio-responsive-gallery'); ?>: 3"
                                   value="<?php echo  isset( $prg_options['columns_count'] ) ? esc_attr( $prg_options['columns_count'] ) : 3; ?>"/>
                            <span class="ays_prg_image_hover_icon_text"><?php echo esc_html__("Default: 3", 'portfolio-responsive-gallery'); ?></span>
                        </div>
                    </div>
                </div>

            </div>
            <div id="tab3" class="ays-portfolio-tab-content">
                <p class="ays-subtitle"><?php echo esc_html__('Set up your projects', 'portfolio-responsive-gallery'); ?></p>
                <h6><?php echo esc_html__('Projects settings', 'portfolio-responsive-gallery'); ?></h6>
                <hr>
                <div class="form-group row">
                    <div class="col-sm-3">
                        <label for="show_title">
							<?php echo esc_html__("Show title of project", 'portfolio-responsive-gallery'); ?>
                            <a class="ays_help" data-toggle="tooltip"
                               title="<?php echo esc_attr__("The name of the project is written in the below of it", 'portfolio-responsive-gallery'); ?>">
                                <i class="fas fa-info-circle"></i>
                            </a>
                        </label>
                    </div>
                    <div class="col-sm-9">
                        <label class="ays_prg_image_hover_icon"><?php echo esc_html__("Show title ", 'portfolio-responsive-gallery'); ?>
                            <input type="checkbox" id="show_title" class=""
                                   name="ays_project_show_title" <?php echo  (isset($prg_options['show_project_title']) && $prg_options['show_project_title'] == "on") ? "checked" : ""; ?>/></label>

                        <div class="show_with_date"
                             style="display: inline-block;"><?php echo esc_html__("Show on", 'portfolio-responsive-gallery'); ?>:
                            <label class="ays_prg_image_hover_icon"><?php echo esc_html__("Project hover ", 'portfolio-responsive-gallery'); ?>
                                <input type="radio" class="ays_project_show_title_on"
                                       name="ays_project_show_title_on" <?php echo  (isset($prg_options['show_project_title_on']) && $prg_options['show_project_title_on'] == "image_hover") || !isset($prg_options['show_project_title_on']) ? "checked" : ""; ?>
                                       value="image_hover"/></label>
                            <label class="ays_prg_image_hover_icon"><?php echo esc_html__("Project thumbnail ", 'portfolio-responsive-gallery'); ?>
                                <input type="radio" class="ays_project_show_title_on"
                                       name="ays_project_show_title_on" <?php echo  (isset($prg_options['show_project_title_on']) && $prg_options['show_project_title_on'] == "project_image") ? "checked" : ""; ?>
                                       value="project_image"/></label>
                        </div>
                    </div>
                </div>
                <hr/>
                <div class="form-group row">
                    <div class="col-sm-3">
                        <label for="ays-lightbox-images-fit">
							<?php echo esc_html__("Lightbox image fit", 'portfolio-responsive-gallery'); ?>
                            <a class="ays_help" data-toggle="tooltip"
                               title='This option is used to specify how the image should be resized to fit its container. This option tells the content to fill the container in a variety of ways; such as "preserve that aspect ratio"(Contain) or "stretch up and take up as much space as possible"(Cover).'>
                                <i class="fas fa-info-circle"></i>
                            </a>
                        </label>
                    </div>
                    <div class="col-sm-9">
                        <div>
                            <select name="ays-lightbox-images-fit" id="ays-view-type">
                                <option value="contain" <?php echo isset($prg_options['images_fit']) && $prg_options['images_fit'] == 'contain' ? "selected" : ""; ?>>
                                    Contain
                                </option>
                                <option value="cover" <?php echo isset($prg_options['images_fit']) && $prg_options['images_fit'] == 'cover' ? "selected" : ""; ?>>
                                    Cover
                                </option>
                            </select>
                        </div>
                    </div>
                </div>
                <hr>
                <div class="prg_position_block form-group row" style="padding: 10px 0;">
                    <div class="col-sm-12 only_pro" style="padding: 10px;">
                        <div class="pro_features">
                            <div>
                                <p>
                                    <?php echo esc_html__("This feature is available only in ", 'portfolio-responsive-gallery'); ?>
                                    <a href="https://ays-pro.com/wordpress/portfolio-responsive-gallery" target="_blank" title="PRO feature"><?php echo esc_html__("PRO version!!!", 'portfolio-responsive-gallery'); ?></a>
                                </p>
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-sm-3">
                                <label for="ays-select-project-trans">
                                    <?php echo esc_html__("Animate In", 'portfolio-responsive-gallery');?>
                                    <a class="ays_help" data-toggle="tooltip"
                                    title='Choose the animation type which will appear when the picture appears in the project.'>
                                        <i class="fas fa-info-circle"></i>
                                    </a>
                                </label>
                            </div>
                            <div class="col-sm-9">
                                <select id="ays-select-project-trans" name="ays_portfolio_carousel_in">
                                    <option value="none"><?php echo esc_html__("-Default-" , 'portfolio-responsive-gallery')?></option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
                <hr>
                <div class="prg_position_block form-group row" style="padding: 10px 0;">
                    <div class="col-sm-12 only_pro" style="padding: 10px;">
                        <div class="pro_features">
                            <div>
                                <p>
                                    <?php echo esc_html__("This feature is available only in ", 'portfolio-responsive-gallery'); ?>
                                    <a href="https://ays-pro.com/wordpress/portfolio-responsive-gallery" target="_blank" title="PRO feature"><?php echo esc_html__("PRO version!!!", 'portfolio-responsive-gallery'); ?></a>
                                </p>
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-sm-3">
                                <label for="ays-select-project-trans">
                                    <?php echo esc_html__("Animate Out", 'portfolio-responsive-gallery');?>
                                    <a class="ays_help" data-toggle="tooltip"
                                    title='Choose the animation type which will appear when the picture appears in the project.'>
                                        <i class="fas fa-info-circle"></i>
                                    </a>
                                </label>
                            </div>
                            <div class="col-sm-9">
                                <select id="ays-select-project-trans" name="ays_portfolio_carousel_in">
                                    <option value="none"><?php echo esc_html__("-Default-" , 'portfolio-responsive-gallery')?></option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
                <hr>
                <div class="prg_position_block form-group row" style="padding: 10px 0;">
                    <div class="col-sm-12 only_pro" style="padding: 10px;">
                        <div class="pro_features">
                            <div>
                                <p>
                                    <?php echo esc_html__("This feature is available only in ", 'portfolio-responsive-gallery'); ?>
                                    <a href="https://ays-pro.com/wordpress/portfolio-responsive-gallery" target="_blank" title="PRO feature"><?php echo esc_html__("PRO version!!!", 'portfolio-responsive-gallery'); ?></a>
                                </p>
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-sm-3">
                                <label for="ays_portfolio_carousel_speed"><?php echo esc_html__("Animation speed (in ms)", 'portfolio-responsive-gallery');?></label>
                                <a 
                                    class="ays_help"
                                    data-toggle="tooltip"
                                    title='Set the length of time it takes for an animation to complete one cycle.'>
                                    <i class="fas fa-info-circle"></i>
                                </a>
                            </div>
                            <div class="col-sm-9">
                                <input id="ays_portfolio_carousel_speed" name="ays_portfolio_carousel_speed" type="number" value="600">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
			<?php
			wp_nonce_field('ays_portfolio_action', 'ays_portfolio_action');
			?>
            <hr/>
            
            <div class="ays_submit_button">               

                <input type="submit" name="ays-submit" class="button ays-submit ays-button button-primary ays-prg-save-comp" value="<?php echo esc_attr__("Save and close", 'portfolio-responsive-gallery'); ?>" prg_submit_name="ays-submit" />  

                <input type="submit" name="ays-apply" id="ays_submit_apply" class="button ays-button ays-submit ays-prg-save-comp" title="Ctrl + s" data-toggle="tooltip" data-delay='{"show":"1000"}' value="<?php echo esc_attr__("Save", 'portfolio-responsive-gallery'); ?>" gpg_submit_name="ays-apply"/>                
                <?php echo $loader_iamge; ?>
                
            </div>
        </form>
    </div>