<?php
use com\cminds\listmanager\plugin\options\Options;
use com\cminds\listmanager\App;

echo do_shortcode( '[cminds_free_activation id="cmlm"]' );
wp_enqueue_style( 'jqueryUIStylesheet', plugin_dir_url(App::PLUGIN_FILE) . 'assets/backend/css/jquery-ui-1.10.3.custom.css' );
wp_enqueue_script('jquery-ui-tooltip');
?>
<div style="height:25px;"></div>
<div class="cmlm">

	<form method="post">
		
		<h2 class="nav-tab-wrapper">
			<a href="#cmlm-tab-plugin-installation" data-for="plugin-installation" class="nav-tab">Installation Guide</a>
			<a href="#cmlm-tab-plugin-options" data-for="plugin-options" class="nav-tab">Plugin Options</a>
			<a href="#cmlm-tab-plugin-app" data-for="plugin-app" class="nav-tab">Plugin Appearance</a>
			<a href="#cmlm-tab-plugin-dia" data-for="plugin-dia" class="nav-tab">Diagnostic</a>
			<a href="#cmlm-tab-plugin-shortcode" data-for="plugin-shortcode" class="nav-tab">Shortcodes</a>
			<a href="#cmlm-tab-plugin-upgrade" data-for="plugin-upgrade" class="nav-tab">Upgrade</a>
		</h2>
		
		<div data-role="tab" data-tab="plugin-installation" style="display: none;">
			<table class="form-table">
				<tbody>
					<tr>
						<td><?php echo do_shortcode( '[cminds_free_guide id="cmlm"]' ); ?></td>
					</tr>
				</tbody>
			</table>
		</div>
		
        <div data-role="tab" data-tab="plugin-options" style="display: none;">
			<h2 style="background:#fff; padding:20px 30px 0px 30px; margin:22px -10px 0 10px;">General</h2>
			<table class="form-table" style="background:#fff; margin:0px 10px;">
				<tbody>
					<tr>
						<th scope="row" style="padding-left:30px; width:25%;"><label for="columns_count">Number of columns *</label><div class="field_help" title="Number of columns generated by plugin."></div></th>
						<td style="width:25%; vertical-align:top;">
							<input name="columns_count" type="number" min="1" max="10" id="columns_count" value="<?php echo intval(Options::getOption('columns_count')); ?>" class="regular-text" required="required">
							<p class="description"></p>
						</td>
						<th class="onlyinpro" scope="row" style="width:25%; padding-left:30px;"><label for="columns_count">Items per page</label><div class="field_help" title="Max number of links displayed one page. Leave empty to exclude pagination."></div></th>
						<td class="onlyinpro">
							<input type="number" disabled value="15" />
							<p class="description"><span class="cm_field_help_pro">(Only in Pro)</span></p>
						</td>
					</tr>
					<tr>
						<th class="onlyinpro" scope="row" style="width:25%; padding-left:30px;"><label for="columns_count">Favicons display</label><div class="field_help" title="Disabling this option will disable the favicons functionality completely."></div></th>
						<td class="onlyinpro" style="vertical-align:top;">
							<input type="radio" disabled> On&nbsp;&nbsp;&nbsp;<input type="radio" disabled checked> Off
							<p class="description"><span class="cm_field_help_pro">(Only in Pro)</span></p>
						</td>
						<th scope="row" style="padding-left:30px; width:25%;"><label for="favicons_local_cache">Favicons local cache</label><div class="field_help" title="If enabled images with favicons will be locally saved as attached - this options is not recommend if you curate large lists (may cause performance issues). Favicon for link is cached during adding or updating link entry."></div></th>
						<td style="width:25%; vertical-align:top;">
							<input type="checkbox" id="favicons_local_cache" onchange="jQuery(this).next().val(this.checked ? 1 : 0)" <?php echo intval(Options::getOption('favicons_local_cache')) ? 'checked="checked"' : ''; ?> />
							<input type="hidden" name="favicons_local_cache" value="<?php echo intval(Options::getOption('favicons_local_cache')); ?>" />
							<p class="description"></p>
						</td>
					</tr>
					<tr>
						<th scope="row" style="width:25%; padding-left:30px;"><label for="links_rel_nofollow">No follow</label><div class="field_help" title="If enabled rel='nofollow' will be added to links."></div></th>
						<td style="vertical-align:top;">
							<input type="checkbox" id="links_rel_nofollow" onchange="jQuery(this).next().val(this.checked ? 1 : 0)" <?php echo intval(Options::getOption('links_rel_nofollow')) ? 'checked="checked"' : ''; ?> />
							<input type="hidden" name="links_rel_nofollow" value="<?php echo intval(Options::getOption('links_rel_nofollow')); ?>" />
							<p class="description"></p>
						</td>
						<th scope="row" style="width:25%; padding-left:30px;"><label for="links_target_blank">Open in a new window or tab</label><div class="field_help" title="If enabled linked documents will be opened in a new window or tab."></div></th>
						<td style="vertical-align:top;">
							<input type="checkbox" id="links_target_blank" onchange="jQuery(this).next().val(this.checked ? 1 : 0)" <?php echo intval(Options::getOption('links_target_blank')) ? 'checked="checked"' : ''; ?> />
							<input type="hidden" name="links_target_blank" value="<?php echo intval(Options::getOption('links_target_blank')); ?>" />
							<p class="description"></p>
						</td>
					</tr>
					<tr class="onlyinpro">
						<th scope="row" style="padding-left:30px; width:25%;"><label for="columns_count">Label for call now button</label><div class="field_help" title="The label for a button that is displayed for items with phone number instead of URL."></div></th>
						<td style="width:25%;">
							<input type="text" disabled value="Call Now" />
							<p class="description"><span class="cm_field_help_pro">(Only in Pro)</span></p>
						</td>
						<th scope="row" style="padding-left:30px; width:25%;"><label for="columns_count">Label for load more link</label><div class="field_help" title="The label for a link that is displayed for load more links."></div></th>
						<td style="width:25%;">
							<input type="text" disabled value="Load More" />
							<p class="description"><span class="cm_field_help_pro">(Only in Pro)</span></p>
						</td>
					</tr>
					<tr class="onlyinpro">
						<th scope="row" style="padding-left:30px; width:25%;"><label for="columns_count">Label for email now button</label><div class="field_help" title="The label for a button that is displayed for items with email address instead of URL."></div></th>
						<td style="width:25%;">
							<input type="text" disabled value="Email Now" />
							<p class="description"><span class="cm_field_help_pro">(Only in Pro)</span></p>
						</td>
						<th scope="row" style="padding-left:30px; width:25%;"><label for="columns_count">Event date format</label><div class="field_help" title="Set event date format."></div></th>
						<td style="width:25%;">
							<input type="text" disabled value="d.m.Y H:i" />
							<p class="description"><span class="cm_field_help_pro">(Only in Pro)</span></p>
						</td>
					</tr>
				</tbody>
			</table>
			<h2 style="background:#fff; padding:20px 30px 0px 30px; margin:0px -10px 0 10px;" class="onlyinpro">Search and Filter</h2>
			<table class="form-table onlyinpro" style="background:#fff; margin:0px 10px;">
				<tbody>
					<tr>
						<th scope="row" style="padding-left:30px; width:25%;"><label for="columns_count">Show search and filter</label><div class="field_help" title="Show upper search field and categories filter."></div></th>
						<td style="width:25%;">
							<input type="radio" disabled> On&nbsp;&nbsp;&nbsp;<input type="radio" disabled checked> Off
							<p class="description"><span class="cm_field_help_pro">(Only in Pro)</span></p>
						</td>
						<th scope="row" style="padding-left:30px; width:25%;"><label for="columns_count">Allow user to hide/show categories filter</label><div class="field_help" title="Allow user to hide some categories in categories filter."></div></th>
						<td style="width:25%;">
							<input type="radio" disabled> On&nbsp;&nbsp;&nbsp;<input type="radio" disabled checked> Off
							<p class="description"><span class="cm_field_help_pro">(Only in Pro)</span></p>
						</td>
					</tr>
					<tr>
						<th scope="row" style="padding-left:30px; width:25%;"><label for="columns_count">Show additional information</label><div class="field_help" title="Show additional information about list."></div></th>
						<td style="width:25%;">
							<input type="radio" disabled> On&nbsp;&nbsp;&nbsp;<input type="radio" disabled checked> Off
							<p class="description"><span class="cm_field_help_pro">(Only in Pro)</span></p>
						</td>
						<th scope="row" style="padding-left:30px; width:25%;"><label for="columns_count">Show category image</label><div class="field_help" title="Show category image."></div></th>
						<td style="width:25%;">
							<input type="radio" disabled> On&nbsp;&nbsp;&nbsp;<input type="radio" disabled checked> Off
							<p class="description"><span class="cm_field_help_pro">(Only in Pro)</span></p>
						</td>
					</tr>
					<tr>
						<th scope="row" style="padding-left:30px; width:25%;"><label for="columns_count">Additional information position</label><div class="field_help" title="Choose where the additional information will be shown."></div></th>
						<td style="width:25%;">
							<select disabled style="width:300px;"><option>Below the search field</option></select>
							<p class="description"><span class="cm_field_help_pro">(Only in Pro)</span></p>
						</td>
						<th></th>
						<td></td>
					</tr>
					<tr>
						<th scope="row" style="padding-left:30px; width:25%;"><label for="columns_count">Search input placeholder</label><div class="field_help" title="Search input placeholder text."></div></th>
						<td style="width:25%;">
							<input type="text" disabled value="Search ..." />
							<p class="description"><span class="cm_field_help_pro">(Only in Pro)</span></p>
						</td>
						<th scope="row" style="padding-left:30px; width:25%;"><label for="columns_count">"All" label</label><div class="field_help" title="'All' label."></div></th>
						<td style="width:25%;">
							<input type="text" disabled value="All" />
							<p class="description"><span class="cm_field_help_pro">(Only in Pro)</span></p>
						</td>
					</tr>
					<tr>
						<th scope="row" style="padding-left:30px; width:25%;"><label for="columns_count">"category" label</label><div class="field_help" title="'category' label in the search input."></div></th>
						<td style="width:25%;">
							<input type="text" disabled value="category" />
							<p class="description"><span class="cm_field_help_pro">(Only in Pro)</span></p>
						</td>
						<th scope="row" style="padding-left:30px; width:25%;"><label for="columns_count">Label for category search input</label><div class="field_help" title="Search input label. Left blank to remove label."></div></th>
						<td style="width:25%;">
							<input type="text" disabled value="Search" />
							<p class="description"><span class="cm_field_help_pro">(Only in Pro)</span></p>
						</td>
					</tr>
					<tr>
						<th scope="row" style="padding-left:30px; width:25%;"><label for="columns_count">Sort by Event date label</label><div class="field_help" title="Sort by Event date label."></div></th>
						<td style="width:25%;">
							<input type="text" disabled value="Sort by Event date" />
							<p class="description"><span class="cm_field_help_pro">(Only in Pro)</span></p>
						</td>
						<th scope="row" style="padding-left:30px; width:25%;"><label for="columns_count">Additional information format</label><div class="field_help" title="Additional information displayed below search filed. Use {last-update-date} placeholder to display list last update date and {links-count} to display number of links. You can use HTML entities (for example or ) to customize information format."></div></th>
						<td style="width:25%;">
							<input type="text" disabled value="<strong>List updated on </strong>{last-update-date}. <strong>Total number of items:</strong> {links-count}." />
							<p class="description"><span class="cm_field_help_pro">(Only in Pro)</span></p>
						</td>
					</tr>
					<tr>
						<th scope="row" style="padding-left:30px; width:25%;"><label for="columns_count">Last update date format</label><div class="field_help" title="Set last update date format."></div></th>
						<td style="width:25%;">
							<input type="text" disabled value="d.m.Y H:i" />
							<p class="description"><span class="cm_field_help_pro">(Only in Pro)</span></p>
						</td>
						<th></th>
						<td></td>
					</tr>
				</tbody>
			</table>
			<h2 style="background:#fff; padding:20px 30px 0px 30px; margin:0px -10px 0 10px;" class="onlyinpro">Links Order</h2>
			<table class="form-table onlyinpro" style="background:#fff; margin:0px 10px;">
				<tbody>
					<tr>
						<th scope="row" style="padding-left:30px; width:25%;"><label for="columns_count">Order by</label><div class="field_help" title="Determine how links will be sorted."></div></th>
						<td style="width:25%;">
							<select disabled style="width:300px;"><option>By name ascending</option></select>
							<p class="description"><span class="cm_field_help_pro">(Only in Pro)</span></p>
						</td>
						<th></th>
						<td></td>
					</tr>
				</tbody>
			</table>
			<h2 style="background:#fff; padding:20px 30px 0px 30px; margin:0px -10px 0 10px;" class="onlyinpro">Category Default View Access</h2>
			<table class="form-table onlyinpro" style="background:#fff; margin:0px 10px;">
				<tbody>
					<tr>
						<th scope="row" style="padding-left:30px; width:25%;"><label for="columns_count">Category view access</label><div class="field_help" title="Who can view category by default"></div></th>
						<td style="width:25%;">
							<select disabled style="width:300px;"><option>All</option></select>
							<p class="description"><span class="cm_field_help_pro">(Only in Pro)</span></p>
						</td>
						<th></th>
						<td></td>
					</tr>
				</tbody>
			</table>
			<h2 style="background:#fff; padding:20px 30px 0px 30px; margin:0px -10px 0 10px;" class="onlyinpro">Social Buttons</h2>
			<table class="form-table onlyinpro" style="background:#fff; margin:0px 10px;">
				<tbody>
					<tr>
						<th scope="row" style="padding-left:30px; width:25%;"><label for="columns_count">Show social share buttons</label><div class="field_help" title="If enabled, social share buttons will be shown"></div></th>
						<td style="width:25%;">
							<input type="radio" disabled> On&nbsp;&nbsp;&nbsp;<input type="radio" disabled checked> Off
							<p class="description"><span class="cm_field_help_pro">(Only in Pro)</span></p>
						</td>
						<th scope="row" style="padding-left:30px; width:25%;"><label for="columns_count">Show social share buttons in new line</label><div class="field_help" title="If enabled, social share buttons will be shown in new line"></div></th>
						<td style="width:25%;">
							<input type="radio" disabled> On&nbsp;&nbsp;&nbsp;<input type="radio" disabled checked> Off
							<p class="description"><span class="cm_field_help_pro">(Only in Pro)</span></p>
						</td>
					</tr>
					<tr>
						<th scope="row" style="padding-left:30px; width:25%;"><label for="columns_count">Show social share buttons on mouseover</label><div class="field_help" title="If enabled, social share buttons chain will be shown on mouse move over share icon. If disabled, chain will be shown on click."></div></th>
						<td style="width:25%;">
							<input type="radio" disabled> On&nbsp;&nbsp;&nbsp;<input type="radio" disabled checked> Off
							<p class="description"><span class="cm_field_help_pro">(Only in Pro)</span></p>
						</td>
						<th></th>
						<td></td>
					</tr>
					<tr>
						<th scope="row" style="padding-left:30px; width:25%;"><label for="columns_count">Facebook</label></th>
						<td style="width:25%;">
							<input type="radio" disabled> On&nbsp;&nbsp;&nbsp;<input type="radio" disabled checked> Off
							<p class="description"><span class="cm_field_help_pro">(Only in Pro)</span></p>
						</td>
						<th scope="row" style="padding-left:30px; width:25%;"><label for="columns_count">Twitter</label></th>
						<td style="width:25%;">
							<input type="radio" disabled> On&nbsp;&nbsp;&nbsp;<input type="radio" disabled checked> Off
							<p class="description"><span class="cm_field_help_pro">(Only in Pro)</span></p>
						</td>
					</tr>
					<tr>
						<th scope="row" style="padding-left:30px; width:25%;"><label for="columns_count">LinkedIn</label></th>
						<td style="width:25%;">
							<input type="radio" disabled> On&nbsp;&nbsp;&nbsp;<input type="radio" disabled checked> Off
							<p class="description"><span class="cm_field_help_pro">(Only in Pro)</span> If enabled, social share buttons will be shown</p>
						</td>
						<th scope="row" style="padding-left:30px; width:25%;"><label for="columns_count">Pinterest</label></th>
						<td style="width:25%;">
							<input type="radio" disabled> On&nbsp;&nbsp;&nbsp;<input type="radio" disabled checked> Off
							<p class="description"><span class="cm_field_help_pro">(Only in Pro)</span></p>
						</td>
					</tr>
					<tr>
						<th scope="row" style="padding-left:30px; width:25%;"><label for="columns_count">Reddit</label></th>
						<td style="width:25%;">
							<input type="radio" disabled> On&nbsp;&nbsp;&nbsp;<input type="radio" disabled checked> Off
							<p class="description"><span class="cm_field_help_pro">(Only in Pro)</span> If enabled, social share buttons will be shown</p>
						</td>
						<th scope="row" style="padding-left:30px; width:25%;"><label for="columns_count">Tumblr</label></th>
						<td style="width:25%;">
							<input type="radio" disabled> On&nbsp;&nbsp;&nbsp;<input type="radio" disabled checked> Off
							<p class="description"><span class="cm_field_help_pro">(Only in Pro)</span></p>
						</td>
					</tr>
					<tr>
						<th scope="row" style="padding-left:30px; width:25%;"><label for="columns_count">Buffer</label></th>
						<td style="width:25%;">
							<input type="radio" disabled> On&nbsp;&nbsp;&nbsp;<input type="radio" disabled checked> Off
							<p class="description"><span class="cm_field_help_pro">(Only in Pro)</span></p>
						</td>
					</tr>
				</tbody>
			</table>
			<h2 style="background:#fff; padding:20px 30px 0px 30px; margin:0px -10px 0 10px;" class="onlyinpro">Link Voting</h2>
			<table class="form-table onlyinpro" style="background:#fff; margin:0px 10px;">
				<tbody>
					<tr>
						<th scope="row" style="padding-left:30px; width:25%;"><label for="columns_count">Choose option</label></th>
						<td style="width:25%;">
							<input type="radio" disabled checked> Disabled<br>
							<input type="radio" disabled> Only allow link likes<br>
							<input type="radio" disabled> Allow link upvote/downwote
							<p class="description"><span class="cm_field_help_pro">(Only in Pro)</span></p>
						</td>
						<th></th>
						<td></td>
					</tr>
				</tbody>
			</table>
			<h2 style="background:#fff; padding:20px 30px 0px 30px; margin:0px -10px 0 10px;" class="onlyinpro">"NEW" Tag</h2>
			<table class="form-table onlyinpro" style="background:#fff; margin:0px 10px;">
				<tbody>
					<tr>
						<td colspan="4" style="padding-left:30px;">This feature allows you to automatically add tag to new or just edited links for specified time.</td>
					</tr>
					<tr>
						<th scope="row" style="padding-left:30px; width:25%;"><label for="columns_count">Tag</label><div class="field_help" title="'NEW' tag - added to new or updated links entries (leave empty to disable "NEW" tag feature)."></div></th>
						<td style="width:25%;">
							<select disabled style="width:300px;"><option></option></select>
							<p class="description"><span class="cm_field_help_pro">(Only in Pro)</span></p>
						</td>
						<th scope="row" style="padding-left:30px; width:25%;"><label for="columns_count">Duration</label><div class="field_help" title="How long 'NEW' tag will be added. Remember, if 'NEW' tag is assigned directly to link, this option will not affect displaying it."></div></th>
						<td style="width:25%;">
							<select disabled><option>3 days</option></select>
							<p class="description"><span class="cm_field_help_pro">(Only in Pro)</span></p>
						</td>
					</tr>
				</tbody>
			</table>
			<table class="form-table onlyinpro_empty" style="background:#fff; margin:0px 10px; display:none;">
				<tbody>
					<tr>
						<th>
							<p style="margin-left:30px; font-weight:normal;">
								Pro options are hidden. Click the button <span style="font-weight:bold;color:#00cd00;">"Show/hide Pro options"</span> to see them.
							</p>
						</th>
					</tr>
				</tbody>
			</table>
			<table class="form-table" style="background:#fff; margin:0px 10px;">
				<tbody>
					<tr>
						<td colspan="2" style="padding-left:30px; vertical-align:top;">
							<input type="hidden" name="cmlm_action_update" value="1" />
							<input type="hidden" name="nonce" value="<?php echo wp_create_nonce('cmlm_action_update'); ?>" />
							<?php submit_button(); ?>
							<small>* - required fields</small>
						</td>
					</tr>
				</tbody>
			</table>
		</div>
		
		<div data-role="tab" data-tab="plugin-app" style="display: none;">
			<h2 style="background:#fff; padding:20px 30px 0px 30px; margin:22px -10px 0 10px;">Categories</h2>
			<table class="form-table" style="background:#fff; margin:0px 10px;">
				<tbody>
					<tr>
						<th scope="row" style="padding-left:30px; width:25%;"><label for="columns_count">Font size</label><div class="field_help" title="Set size in px or em. Leave empty to use default."></div></th>
						<td style="width:25%;">
							<input type="text" name="category_font_size" value="<?php echo Options::getOption('category_font_size'); ?>" />
							<p class="description"></p>
						</td>
						<th scope="row" style="padding-left:30px; width:25%;" class="onlyinpro"><label for="columns_count">Text color</label><div class="field_help" title="Category title text color (clear to use default)."></div></th>
						<td style="width:25%;" class="onlyinpro">
							<input type="color" disabled value="#FFFFFF" />
							<p class="description"><span class="cm_field_help_pro">(Only in Pro)</span></p>
						</td>
					</tr>
					<tr class="onlyinpro">
						<th scope="row" style="padding-left:30px;"><label for="columns_count">Background color</label><div class="field_help" title="Category title background color (clear to use default)."></div></th>
						<td>
							<input type="color" disabled value="#FFFFFF" />
							<p class="description"><span class="cm_field_help_pro">(Only in Pro)</span></p>
						</td>
						<th scope="row" style="padding-left:30px;"><label for="columns_count">Show category image</label><div class="field_help" title="Show category image."></div></th>
						<td>
							<input type="radio" disabled> On&nbsp;&nbsp;&nbsp;<input type="radio" disabled checked> Off
							<p class="description"><span class="cm_field_help_pro">(Only in Pro)</span></p>
						</td>
					</tr>
					<tr class="onlyinpro">
						<th scope="row" style="padding-left:30px;"><label for="columns_count">Category Image width</label><div class="field_help" title="Width of images for category. Set width in px. Leave empty for auto size."></div></th>
						<td>
							<input type="text" disabled value="300px" />
							<p class="description"><span class="cm_field_help_pro">(Only in Pro)</span></p>
						</td>
						<th scope="row" style="padding-left:30px;"><label for="columns_count">Category image height</label><div class="field_help" title="Height for category. Set height in px. Leave empty for auto size."></div></th>
						<td>
							<input type="text" disabled value="100px" />
							<p class="description"><span class="cm_field_help_pro">(Only in Pro)</span></p>
						</td>
					</tr>
				</tbody>
			</table>
			<h2 style="background:#fff; padding:20px 30px 0px 30px; margin:0px -10px 0 10px;">Links</h2>
			<table class="form-table" style="background:#fff; margin:0px 10px;">
				<tbody>
					<tr>
						<th scope="row" style="padding-left:30px; width:25%;"><label for="columns_count">Font size</label><div class="field_help" title="Set size in px or em. Leave empty to use default."></div></th>
						<td style="width:25%;">
							<input type="text" name="link_font_size" value="<?php echo Options::getOption('link_font_size'); ?>" />
							<p class="description"></p>
						</td>
						<th scope="row" style="padding-left:30px; width:25%;" class="onlyinpro"><label for="columns_count">Link title color</label><div class="field_help" title="Clear to use default."></div></th>
						<td style="width:25%;" class="onlyinpro">
							<input type="color" disabled value="#FFFFFF" />
							<p class="description"><span class="cm_field_help_pro">(Only in Pro)</span></p>
						</td>
					</tr>
					<tr class="onlyinpro">
						<th scope="row" style="padding-left:30px;"><label for="columns_count">Word-break option</label><div class="field_help" title="Determine how word wraps will be applied in the link title."></div></th>
						<td>
							<select disabled><option value="break-all">break-all</option><option value="break-word" selected="selected">break-word</option><option value="keep-all">keep-all</option><option value="normal">normal</option></select>
							<p class="description"><span class="cm_field_help_pro">(Only in Pro)</span></p>
						</td>
						<th scope="row" style="padding-left:30px;"><label for="columns_count">Example:</label></th>
						<td>
							<div id="cmlm-example-element" class="transition-all" style="word-break: break-word; display: block; min-width: 200px; width: 300px; height: auto; border: 2px solid #ddd; background-color: white; font-weight: 400; overflow-wrap: break-word;">Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
                                次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉
                                </div>
						</td>
					</tr>
					<tr class="onlyinpro">
						<th scope="row" style="padding-left:30px;"><label for="columns_count">Show description</label><div class="field_help" title="Show description under link"></div></th>
						<td>
							<input type="radio" disabled> On&nbsp;&nbsp;&nbsp;<input type="radio" disabled checked> Off
							<p class="description"><span class="cm_field_help_pro">(Only in Pro)</span></p>
						</td>
						<th scope="row" style="padding-left:30px;"><label for="columns_count">Show subtitle</label><div class="field_help" title="Show subtitle under link"></div></th>
						<td>
							<input type="radio" disabled> On&nbsp;&nbsp;&nbsp;<input type="radio" disabled checked> Off
							<p class="description"><span class="cm_field_help_pro">(Only in Pro)</span></p>
						</td>
					</tr>
					<tr class="onlyinpro">
						<th scope="row" style="padding-left:30px;"><label for="columns_count">Subtitle font size</label><div class="field_help" title="Set size in px or em. Leave empty to use default."></div></th>
						<td>
							<input type="text" disabled value="14px" />
							<p class="description"><span class="cm_field_help_pro">(Only in Pro)</span></p>
						</td>
						<th scope="row" style="padding-left:30px;"><label for="columns_count">Subtitle color</label><div class="field_help" title="Clear to use default."></div></th>
						<td>
							<input type="color" disabled value="#FFFFFF" />
							<p class="description"><span class="cm_field_help_pro">(Only in Pro)</span></p>
						</td>
					</tr>
					<tr class="onlyinpro">
						<th scope="row" style="padding-left:30px;"><label for="columns_count">Hover background color</label><div class="field_help" title="Links hover background color (clear to use default)."></div></th>
						<td>
							<input type="color" disabled value="#FFFFFF" />
							<p class="description"><span class="cm_field_help_pro">(Only in Pro)</span></p>
						</td>
						<th scope="row" style="padding-left:30px;"><label for="columns_count">Tag-file link 1 background color</label><div class="field_help" title="Default value is white (#FFFFFF)"></div></th>
						<td>
							<input type="color" disabled value="#FFFFFF" />
							<p class="description"><span class="cm_field_help_pro">(Only in Pro)</span></p>
						</td>
					</tr>
					<tr class="onlyinpro">
						<th scope="row" style="padding-left:30px;"><label for="columns_count">Tag-file link 2 background color</label><div class="field_help" title="Default value is white (#FFFFFF)"></div></th>
						<td>
							<input type="color" disabled value="#FFFFFF" />
							<p class="description"><span class="cm_field_help_pro">(Only in Pro)</span></p>
						</td>
						<th scope="row" style="padding-left:30px;"><label for="columns_count">Tag-file link 3 background color</label><div class="field_help" title="Default value is white (#FFFFFF)"></div></th>
						<td>
							<input type="color" disabled value="#FFFFFF" />
							<p class="description"><span class="cm_field_help_pro">(Only in Pro)</span></p>
						</td>
					</tr>
					<tr class="onlyinpro">
						<th scope="row" style="padding-left:30px;"><label for="columns_count">Image width</label><div class="field_help" title="Width of images in links. Set width in px. Leave empty for auto size."></div></th>
						<td>
							<input type="text" disabled value="300px" />
							<p class="description"><span class="cm_field_help_pro">(Only in Pro)</span></p>
						</td>
						<th scope="row" style="padding-left:30px;"><label for="columns_count">Image height</label><div class="field_help" title="Height of images in links. Set height in px. Leave empty for auto size."></div></th>
						<td>
							<input type="text" disabled value="100px" />
							<p class="description"><span class="cm_field_help_pro">(Only in Pro)</span></p>
						</td>
					</tr>
					<tr class="onlyinpro">
						<th scope="row" style="padding-left:30px;"><label for="columns_count">Video height</label><div class="field_help" title="Height of videos in links. Set height in px. Leave empty for auto size."></div></th>
						<td>
							<input type="text" disabled value="315px" />
							<p class="description"><span class="cm_field_help_pro">(Only in Pro)</span></p>
						</td>
						<th scope="row" style="padding-left:30px;"><label for="columns_count">Video width</label><div class="field_help" title="Width of videos in links. Set width in px. Leave empty for auto size."></div></th>
						<td>
							<input type="text" disabled value="560px" />
							<p class="description"><span class="cm_field_help_pro">(Only in Pro)</span></p>
						</td>
					</tr>
					<tr class="onlyinpro">
						<th scope="row" style="padding-left:30px;"><label for="columns_count">Video width</label><div class="field_help" title="Link opacity (from 0 to 1)."></div></th>
						<td>
							<input type="number" disabled value="0.75" />
							<p class="description"><span class="cm_field_help_pro">(Only in Pro)</span></p>
						</td>
						<th scope="row" style="padding-left:30px;"><label for="columns_count">Show attachment icons</label><div class="field_help" title="Show file-type icon of attached files."></div></th>
						<td>
							<input type="radio" disabled> On&nbsp;&nbsp;&nbsp;<input type="radio" disabled checked> Off
							<p class="description"><span class="cm_field_help_pro">(Only in Pro)</span></p>
						</td>
					</tr>
				</tbody>
			</table>
			<h2 style="background:#fff; padding:20px 30px 0px 30px; margin:0px -10px 0 10px;" class="onlyinpro">Tooltips</h2>
			<table class="form-table onlyinpro" style="background:#fff; margin:0px 10px;">
				<tbody>
					<tr>
						<th scope="row" style="padding-left:30px; width:25%;"><label for="columns_count">Show tooltips</label><div class="field_help" title="Show tooltips on category filter."></div></th>
						<td style="width:25%;">
							<input type="radio" disabled> On&nbsp;&nbsp;&nbsp;<input type="radio" disabled checked> Off
							<p class="description"><span class="cm_field_help_pro">(Only in Pro)</span></p>
						</td>
						<th scope="row" style="padding-left:30px; width:25%;"><label for="columns_count">What display</label><div class="field_help" title="Choose what to show in the tooltip"></div></th>
						<td style="width:25%;">
							<select disabled><option value="both" selected="selected">Both</option></select>
							<p class="description"><span class="cm_field_help_pro">(Only in Pro)</span></p>
						</td>
					</tr>
					<tr>
						<th scope="row" style="padding-left:30px;"><label for="columns_count">Instruction Text</label><div class="field_help" title="Default instruction text is 'Use checkboxes to get the content from selected categories. Click on category, to show only related links'"></div></th>
						<td>
							<input type="text" value="Use checkboxes to get the content from selected categories. Click on category, to show only related links" disabled>
							<p class="description"><span class="cm_field_help_pro">(Only in Pro)</span></p>
						</td>
						<th scope="row" style="padding-left:30px;"><label for="columns_count">Font size</label><div class="field_help" title="Set size in px or em. Leave empty to use default."></div></th>
						<td>
							<input type="text" disabled>
							<p class="description"><span class="cm_field_help_pro">(Only in Pro)</span></p>
						</td>
					</tr>
					<tr>
						<th scope="row" style="padding-left:30px;"><label for="columns_count">Text color</label><div class="field_help" title="Tooltips text color (clear to use default)."></div></th>
						<td>
							<input type="color" disabled value="#FFFFFF" />
							<p class="description"><span class="cm_field_help_pro">(Only in Pro)</span></p>
						</td>
						<th scope="row" style="padding-left:30px;"><label for="columns_count">Background color</label><div class="field_help" title="Tooltips background color (clear to use default)."></div></th>
						<td>
							<input type="color" disabled value="#FFFFFF" />
							<p class="description"><span class="cm_field_help_pro">(Only in Pro)</span></p>
						</td>
					</tr>
					<tr>
						<th scope="row" style="padding-left:30px;"><label for="columns_count">Border color</label><div class="field_help" title="Tooltips border color (clear to use default)."></div></th>
						<td>
							<input type="color" disabled value="#FFFFFF" />
							<p class="description"><span class="cm_field_help_pro">(Only in Pro)</span></p>
						</td>
					</tr>
				</tbody>
			</table>
			<h2 style="background:#fff; padding:20px 30px 0px 30px; margin:0px -10px 0 10px;" class="onlyinpro">Social Network Buttons</h2>
			<table class="form-table onlyinpro" style="background:#fff; margin:0px 10px;">
				<tbody>
					<tr>
						<th scope="row" style="padding-left:30px; width:25%;"><label for="columns_count">Button size</label><div class="field_help" title="Set size in px. Default size is 25px."></div></th>
						<td style="width:25%;">
							<input type="text" disabled value="25px" />
							<p class="description"><span class="cm_field_help_pro">(Only in Pro)</span></p>
						</td>
						<th scope="row" style="padding-left:30px; width:25%;"><label for="columns_count">Button opacity</label><div class="field_help" title="Button opacity (from 0 to 1)."></div></th>
						<td style="width:25%;">
							<input type="number" disabled value="0.5" />
							<p class="description"><span class="cm_field_help_pro">(Only in Pro)</span></p>
						</td>
					</tr>
				</tbody>
			</table>
			<h2 style="background:#fff; padding:20px 30px 0px 30px; margin:0px -10px 0 10px;" class="onlyinpro">For Event List</h2>
			<table class="form-table onlyinpro" style="background:#fff; margin:0px 10px;">
				<tbody>
					<tr>
						<th scope="row" style="padding-left:30px; width:25%;"><label for="columns_count">Show event date</label><div class="field_help" title="Show event date under name of link."></div></th>
						<td style="width:25%;">
							<input type="radio" disabled> On&nbsp;&nbsp;&nbsp;<input type="radio" disabled checked> Off
							<p class="description"><span class="cm_field_help_pro">(Only in Pro)</span></p>
						</td>
						<th scope="row" style="padding-left:30px; width:25%;"><label for="columns_count">Event date label</label><div class="field_help" title="Event date label."></div></th>
						<td style="width:25%;">
							<input type="text" disabled value="Event Date:" />
							<p class="description"><span class="cm_field_help_pro">(Only in Pro)</span></p>
						</td>
					</tr>
					<tr>
						<th scope="row" style="padding-left:30px;"><label for="columns_count">Show sorting by event date</label><div class="field_help" title="Show sorting by event date."></div></th>
						<td>
							<input type="radio" disabled> On&nbsp;&nbsp;&nbsp;<input type="radio" disabled checked> Off
							<p class="description"><span class="cm_field_help_pro">(Only in Pro)</span></p>
						</td>
						<th scope="row" style="padding-left:30px;"><label for="columns_count">Remove Sorting Button</label><div class="field_help" title="Remove sorting button label."></div></th>
						<td>
							<input type="text" disabled value="Event Date:" />
							<p class="description"><span class="cm_field_help_pro">(Only in Pro)</span></p>
						</td>
					</tr>
					<tr>
						<th scope="row" style="padding-left:30px;"><label for="columns_count">Font size</label><div class="field_help" title="Set size in px or em. Leave empty to use default."></div></th>
						<td>
							<input type="text" disabled value="14px" />
							<p class="description"><span class="cm_field_help_pro">(Only in Pro)</span></p>
						</td>
						<th scope="row" style="padding-left:30px;"><label for="columns_count">Font style option</label><div class="field_help" title="Event date text font style."></div></th>
						<td>
							<select disabled><option value="normal" selected="selected">Normal</option></select>
							<p class="description"><span class="cm_field_help_pro">(Only in Pro)</span></p>
						</td>
					</tr>
					<tr>
						<th scope="row" style="padding-left:30px;"><label for="columns_count">Text color</label><div class="field_help" title="Event date text color (clear to use default)."></div></th>
						<td>
							<input type="color" disabled value="#FFFFFF" />
							<p class="description"><span class="cm_field_help_pro">(Only in Pro)</span></p>
						</td>
					</tr>
				</tbody>
			</table>
			<table class="form-table onlyinpro_empty" style="background:#fff; margin:0px 10px; display:none;">
				<tbody>
					<tr>
						<th>
							<p style="margin-left:30px; font-weight:normal;">
								Pro options are hidden. Click the button <span style="font-weight:bold;color:#00cd00;">"Show/hide Pro options"</span> to see them.
							</p>
						</th>
					</tr>
				</tbody>
			</table>
			<table class="form-table" style="background:#fff; margin:0px 10px;">
				<tbody>
					<tr>
						<td colspan="2" style="padding-left:30px; vertical-align:top;">
							<input type="hidden" name="cmlm_action_update" value="1" />
							<input type="hidden" name="nonce" value="<?php echo wp_create_nonce('cmlm_action_update'); ?>" />
							<?php submit_button(); ?>
							<small>* - required fields</small>
						</td>
					</tr>
				</tbody>
			</table>
		</div>
		
		<div data-role="tab" data-tab="plugin-dia" style="display:none;">
			<h2 style="background:#fff; padding:20px 30px 0px 30px; margin:22px -10px 0 10px;" class="onlyinpro">General</h2>
			<table class="form-table onlyinpro" style="background:#fff; margin:0px 10px;">
				<tbody>
					<tr>
						<th scope="row" style="padding-left:30px; width:25%;"><label for="columns_count">Enable cron of link status</label><div class="field_help" title="Disabling this option will disable the cron for check link status."></div></th>
						<td style="width:25%; vertical-align:top;">
							<input type="radio" disabled> On&nbsp;&nbsp;&nbsp;<input type="radio" disabled checked> Off
							<p class="description"><span class="cm_field_help_pro">(Only in Pro)</span></p>
						</td>
						<th scope="row" style="padding-left:30px; width:25%;"><label for="columns_count">Run cron manually</label></th>
						<td style="width:25%; vertical-align:top;">
							<input type="button" disabled value="Start Process" class="button" />
							<p class="description"><span class="cm_field_help_pro">(Only in Pro)</span></p>
						</td>
					</tr>
				</tbody>
			</table>
			<table class="form-table onlyinpro_empty" style="background:#fff; margin:22px -10px 0 10px; display:none;">
				<tbody>
					<tr>
						<th>
							<p style="margin-left:30px; font-weight:normal;">
								Pro options are hidden. Click the button <span style="font-weight:bold;color:#00cd00;">"Show/hide Pro options"</span> to see them.
							</p>
						</th>
					</tr>
				</tbody>
			</table>
		</div>
		
		<div data-role="tab" data-tab="plugin-shortcode" style="display: none;">
			<table class="form-table" style="background:#fff; margin:20px 10px 0px 10px;">
				<tbody>
					<tr>
						<td style="padding-left:30px;">
							<strong>Available Shortcode:</strong>
							<br><br>
							<code>[cm_list_manager]</code> - Display curated list on the front-end.
						</td>
					</tr>
					<tr class="onlyinpro">
						<td style="padding-left:30px;">
							<div>Following shortcode parameters available only in pro</div>
							<ul style="list-style:circle; margin-left:20px;">
								<li><strong>list</strong> — slug or list of slugs of lists</li>
								<li><strong>category</strong> — slug or list of slugs of categories</li>
								<li><strong>tag</strong> — is slug or list of slugs of tags</li>
								<li><strong>category_id</strong></li>
								<li><strong>max_links</strong></li>
								<li><strong>max_height</strong></li>
								<li><strong>categories_filter</strong></li>
								<li><strong>placeholder</strong></li>
								<li><strong>description</strong></li>
								<li><strong>show_bonus_info</strong></li>
								<li><strong>items_per_page</strong></li>
								<li><strong>scroll</strong></li>
								<li><strong>show_event_date</strong></li>
								<li><strong>tagdescription</strong> — Use 1 for show and 0 for hide. Default is 0</li>
							</ul>
						</td>
					</tr>
				</tbody>
			</table>
			<table class="form-table onlyinpro_empty" style="background:#fff; margin:0px 10px; display:none;">
				<tbody>
					<tr>
						<th style="padding-top:0px;">
							<p style="margin-left:30px; font-weight:normal;">
								Pro options are hidden. Click the button <span style="font-weight:bold;color:#00cd00;">"Show/hide Pro options"</span> to see them.
							</p>
						</th>
					</tr>
				</tbody>
			</table>
		</div>
		
		<div data-role="tab" data-tab="plugin-upgrade" style="display: none;">
			<table class="form-table">
				<tbody>
					<tr>
						<td><?php echo do_shortcode( '[cminds_upgrade_box id="cmlm"]' ); ?></td>
					</tr>
				</tbody>
			</table>
		</div>
		
    </form>
	
</div>
<style>
.field_help { display:inline-block; width:15px; height:15px; cursor:pointer; float:right; background-image:url('<?php echo plugin_dir_url(__FILE__); ?>images/help.png'); }
.field_help:hover { background-image: url('<?php echo plugin_dir_url(__FILE__); ?>images/help_hover.png'); }
.onlyinpro * { color:#aaa !important; }
.onlyinpro { color:#aaa !important; }
.onlyinpro.hide { display:none !important; }
.onlyinpro_empty.show { display: table !important; }
.cm_field_help_pro { color:green !important; opacity:0.5; }
</style>
<script type="text/javascript">
(function ($) {
	"use strict";
	$('.cmlm .nav-tab').on('click', function () {
		$('.cmlm .nav-tab').removeClass('nav-tab-active');
		$(this).addClass('nav-tab-active');
		$('.cmlm *[data-role="tab"]').hide();
		$('.cmlm *[data-role="tab"][data-tab="' + $(this).data('for') + '"]').show();
	});
	if ($('.cmlm a[href="' + window.location.hash + '"]').click().length != 1) {
		$('.cmlm a.nav-tab').first().click();
	}
	$('.cmlm input[type="submit"]').on('click', function () {
		if ($('.cmlm form').find(':invalid')) {
			var tab = $('.cmlm form').find(':invalid').first().parents('*[data-role="tab"]').data('tab');
			$('.cmlm').find('a[data-for="' + tab + '"]').click();
		}
	});
	
	$(document).ready(function () {
		$('.field_help').tooltip({
			show: {
				effect: "slideDown",
				delay: 100
			},
			position: {
				my: "left top",
				at: "right top"
			},
			content: function () {
				var element = $( this );
				return element.attr( 'title' );
			},
			close: function ( event, ui ) {
				ui.tooltip.hover(
					function () {
						$( this ).stop( true ).fadeTo( 400, 1 );
					},
					function () {
						$( this ).fadeOut( "400", function () {
							$( this ).remove();
						} );
					} );
			}
		});
	});
		
})(jQuery);
</script>