<!-- Edit this file to change the layout of the detail view form -->

<a name="detail-view"></a>
<div class="panel-heading"><h3 class="panel-title"><strong><%%DETAIL_VIEW_TITLE%%></strong></h3></div>

<div class="panel-body" id="titles_dv_container">
	<!-- child links -->
	<div class="row">
		<div class="col-xs-12">
			<div class="clearfix"></div>
		</div>
	</div>

	<div class="row">
		<!-- form inputs -->
		<div class="col-md-8 col-lg-10" id="titles_dv_form">
			<fieldset class="form-horizontal">

				<div class="form-group">
					<hr class="hidden-md hidden-lg">
					<label for="id" class="control-label col-lg-3">ID</label>
					<div class="col-lg-9">
						<div class="form-control-static" id="id"><%%VALUE(id)%%></div>
					</div>
				</div>

				<div class="form-group">
					<hr class="hidden-md hidden-lg">
					<label for="website_name" class="control-label col-lg-3">Website Name <i class="glyphicon glyphicon-info-sign text-info" data-toggle="collapse" data-target="#website_name-description"></i></label>
					<div class="col-lg-9">
						<span class="help-block collapse" id="website_name-description"><div class="alert alert-info">enter your website/blog name here</div></span>

						<input maxlength="40" type="text" class="form-control" name="website_name" id="website_name" value="<%%VALUE(website_name)%%>">
					</div>
				</div>

				<div class="form-group">
					<hr class="hidden-md hidden-lg">
					<label for="tagline" class="control-label col-lg-3">Tagline <i class="glyphicon glyphicon-info-sign text-info" data-toggle="collapse" data-target="#tagline-description"></i></label>
					<div class="col-lg-9">
						<span class="help-block collapse" id="tagline-description"><div class="alert alert-info">eneter your website/blog tagline here</div></span>

						<input maxlength="40" type="text" class="form-control" name="tagline" id="tagline" value="<%%VALUE(tagline)%%>">
					</div>
				</div>

				<div class="form-group">
					<hr class="hidden-md hidden-lg">
					<label class="control-label col-lg-3">Icon <i class="glyphicon glyphicon-info-sign text-info" data-toggle="collapse" data-target="#icon-description"></i></label>
					<div class="col-lg-9">
						<span class="help-block collapse" id="icon-description"><div class="alert alert-info">Maximum file size allowed: 3000 KB.<br>Allowed file types: jpg, jpeg, gif, png</div></span>

						<div class="form-control-static"><div class="pull-left">

						<img src="thumbnail.php?i=<%%VALUE(icon)%%>&t=titles&f=icon&v=dv" class="img-thumbnail" id="icon-image">
</div>

												<div class="pull-right" style="overflow-x: hidden;">
							<div class="hidden-md hidden-lg vspacer-lg"></div>
							<%%UPLOADFILE(icon)%%>
							<%%REMOVEFILE(icon)%%>
						</div>
						<div class="clearfix"></div>
					</div>

					</div>
				</div>

				<div class="form-group">
					<hr class="hidden-md hidden-lg">
					<label for="keywords" class="control-label col-lg-3">Keywords <i class="glyphicon glyphicon-info-sign text-info" data-toggle="collapse" data-target="#keywords-description"></i></label>
					<div class="col-lg-9">
						<span class="help-block collapse" id="keywords-description"><div class="alert alert-info">separate key words with a comma , eg blog,website,fashion</div></span>

						<input maxlength="220" type="text" class="form-control" name="keywords" id="keywords" value="<%%VALUE(keywords)%%>">
					</div>
				</div>

				<div class="form-group">
					<hr class="hidden-md hidden-lg">
					<label for="short_description" class="control-label col-lg-3">Short description <i class="glyphicon glyphicon-info-sign text-info" data-toggle="collapse" data-target="#short_description-description"></i></label>
					<div class="col-lg-9">
						<span class="help-block collapse" id="short_description-description"><div class="alert alert-info">this will appear in the footer and meta tags</div></span>

						<input maxlength="200" type="text" class="form-control" name="short_description" id="short_description" value="<%%VALUE(short_description)%%>">
					</div>
				</div>

				<div class="form-group">
					<hr class="hidden-md hidden-lg">
					<label for="detailed_description" class="control-label col-lg-3">Detailed description <i class="glyphicon glyphicon-info-sign text-info" data-toggle="collapse" data-target="#detailed_description-description"></i></label>
					<div class="col-lg-9">
						<span class="help-block collapse" id="detailed_description-description"><div class="alert alert-info">This content will appear in the about us page of your blog</div></span>

						<textarea class="form-control" name="detailed_description" id="detailed_description" rows="5"><%%VALUE(detailed_description)%%></textarea>
					</div>
				</div>

				<div class="form-group">
					<hr class="hidden-md hidden-lg">
					<label for="bannertext1" class="control-label col-lg-3">Bannertext1 <i class="glyphicon glyphicon-info-sign text-info" data-toggle="collapse" data-target="#bannertext1-description"></i></label>
					<div class="col-lg-9">
						<span class="help-block collapse" id="bannertext1-description"><div class="alert alert-info">text will appear first on the banner in home page</div></span>

						<input maxlength="150" type="text" class="form-control" name="bannertext1" id="bannertext1" value="<%%VALUE(bannertext1)%%>">
					</div>
				</div>

				<div class="form-group">
					<hr class="hidden-md hidden-lg">
					<label for="bannertext2" class="control-label col-lg-3">Bannertext2 <i class="glyphicon glyphicon-info-sign text-info" data-toggle="collapse" data-target="#bannertext2-description"></i></label>
					<div class="col-lg-9">
						<span class="help-block collapse" id="bannertext2-description"><div class="alert alert-info">text will appear second on the banner on the home page</div></span>

						<input maxlength="150" type="text" class="form-control" name="bannertext2" id="bannertext2" value="<%%VALUE(bannertext2)%%>">
					</div>
				</div>

				<div class="form-group">
					<hr class="hidden-md hidden-lg">
					<label for="bannertext3" class="control-label col-lg-3">Bannertext3 <i class="glyphicon glyphicon-info-sign text-info" data-toggle="collapse" data-target="#bannertext3-description"></i></label>
					<div class="col-lg-9">
						<span class="help-block collapse" id="bannertext3-description"><div class="alert alert-info">text will appear third on the banner on the homepage</div></span>

						<input maxlength="150" type="text" class="form-control" name="bannertext3" id="bannertext3" value="<%%VALUE(bannertext3)%%>">
					</div>
				</div>

				<div class="form-group">
					<hr class="hidden-md hidden-lg">
					<label for="bannertext4" class="control-label col-lg-3">Bannertext4 <i class="glyphicon glyphicon-info-sign text-info" data-toggle="collapse" data-target="#bannertext4-description"></i></label>
					<div class="col-lg-9">
						<span class="help-block collapse" id="bannertext4-description"><div class="alert alert-info">text will appear fouth on the banner on the home page</div></span>

						<input maxlength="150" type="text" class="form-control" name="bannertext4" id="bannertext4" value="<%%VALUE(bannertext4)%%>">
					</div>
				</div>

				<div class="form-group">
					<hr class="hidden-md hidden-lg">
					<label for="address" class="control-label col-lg-3">Address <i class="glyphicon glyphicon-info-sign text-info" data-toggle="collapse" data-target="#address-description"></i></label>
					<div class="col-lg-9">
						<span class="help-block collapse" id="address-description"><div class="alert alert-info">enter your address ,this will appear in the contacts page</div></span>

						<input maxlength="40" type="text" class="form-control" name="address" id="address" value="<%%VALUE(address)%%>">
					</div>
				</div>

				<div class="form-group">
					<hr class="hidden-md hidden-lg">
					<label for="email" class="control-label col-lg-3">Email</label>
					<div class="col-lg-9">
						
						<div>
							<a id="email-link" href="mailto:<%%VALUE(email)%%>" target="_blank"><i class="glyphicon glyphicon-envelope text-info" title="<%%VALUE(email)%%>"></i></a>
							<label for="email"><button type="button" id="email-edit-link" class="btn btn-default hspacer-lg vspacer-sm" data-toggle="collapse" data-target="#email" title="<%%TRANSLATION(Edit)%%>"><i class="glyphicon glyphicon-pencil"></i></button></label>
						</div>
						<script>jQuery(function(){ var e_email = '<%%VALUE(email)%%>'; if(e_email == '' || e_email == '&nbsp;' || e_email == 'blank.gif') jQuery('#email-link').hide(); });</script><input maxlength="80" type="text" class="form-control collapse" name="email" id="email" value="<%%VALUE(email)%%>">
					</div>
				</div>

				<div class="form-group">
					<hr class="hidden-md hidden-lg">
					<label for="phone" class="control-label col-lg-3">Phone <i class="glyphicon glyphicon-info-sign text-info" data-toggle="collapse" data-target="#phone-description"></i></label>
					<div class="col-lg-9">
						<span class="help-block collapse" id="phone-description"><div class="alert alert-info">enter your phone this will appear in the contacts page</div></span>

						<input maxlength="40" type="text" class="form-control" name="phone" id="phone" value="<%%VALUE(phone)%%>">
					</div>
				</div>

				<div class="form-group">
					<hr class="hidden-md hidden-lg">
					<label for="googlemap" class="control-label col-lg-3">Googlemap <i class="glyphicon glyphicon-info-sign text-info" data-toggle="collapse" data-target="#googlemap-description"></i></label>
					<div class="col-lg-9">
						<span class="help-block collapse" id="googlemap-description"><div class="alert alert-info">enter goole map url here for your location ,this will be displayed in the contact us page</div></span>

						
						<div class="form-control-static">
							<div><%%GOOGLEMAP(googlemap)%%></div>
							<label for="googlemap"><button type="button" id="googlemap-edit-link" class="btn btn-default hspacer-lg vspacer-sm" data-toggle="collapse" data-target="#googlemap" title="<%%TRANSLATION(Edit)%%>"><i class="glyphicon glyphicon-pencil"></i></button></label>
						</div><input maxlength="255" type="text" class="form-control collapse" name="googlemap" id="googlemap" value="<%%VALUE(googlemap)%%>">
					</div>
				</div>

			</fieldset>
		</div>

		<!-- DV action buttons -->
		<hr class="hidden-md hidden-lg">
		<div class="col-md-4 col-lg-2" id="titles_dv_action_buttons">
			<div class="btn-toolbar">
				<div class="btn-group-vertical btn-group-lg" style="width: 100%;">
					<%%UPDATE_BUTTON%%>
				</div><p></p>
				<div class="btn-group-vertical btn-group-lg" style="width: 100%;">
					<%%DESELECT_BUTTON%%>
					<%%DVPRINT_BUTTON%%>
					<%%DELETE_BUTTON%%>
				</div><p></p>
				<div class="btn-group-vertical btn-group-lg" style="width: 100%;">
					<%%INSERT_BUTTON%%>
				</div>
			</div>
		</div>
	</div>


</div><!-- /div class="panel-body" -->
	<script>
		$j(function() {
			var add_new_mode = (!$j('input[name=SelectedID]').val());
			var embedded_mode = ($j('input[name=Embedded]').val() == 1);

			/* auto-close embedded page? */
			var autoclose_mode = ($j('input[name=AutoClose]').val() == 1);
			var record_added_ok = (location.search.split('record-added-ok=').length == 2);
			var record_updated_ok = (location.search.split('record-updated-ok=').length == 2);
			if((record_added_ok || record_updated_ok) && embedded_mode && autoclose_mode){
				setTimeout(AppGini.closeParentModal, 2000);
			}

			/* enable DV action buttons to float on scrolling down the form */
			enable_dvab_floating();

			if(!(embedded_mode && AppGini.mobileDevice())){
				$j('select, input[type=text], textarea').not(':disabled').eq(0).focus();
			}

			$j('form').eq(0).change(function(){
				if($j(this).data('already_changed')) return;
				if($j('#deselect').length) $j('#deselect').removeClass('btn-default').addClass('btn-warning').get(0).lastChild.data = " <%%TRANSLATION(Cancel)%%>";
				$j(this).data('already_changed', true);
			});

			$j('a[href="<%%TRANSLATION(ImageFolder)%%>"]').click(function(){ return false; });


			if(!embedded_mode){
				/* add a horizontal spacer to [add new parent] buttons that don't have a spacered element before them */
				$j('.add_new_parent').prev(':not(.hspacer-md)').next().addClass('hspacer-md');

				$j('.add_new_parent').click(function(){
					var pt = $j(this).attr('id').replace(/_add_new$/, '');
					modal_window({
						url: pt + '_view.php?addNew_x=1&Embedded=1',
						close: function(){
							var field_id = $j('#' + pt + '_add_new').prevAll('input:hidden').eq(0).attr('id');
							$j('#' + field_id + '-container').select2('focus').select2('focus');
						},
						size: 'full',
						title: $j(this).attr('title')
					});
				});
			}

			/* find and hide parent links if field label has data 'parent_link' set to 'view_parent_hidden' */
			$j('label[data-parent_link=view_parent_hidden]').each(function(){
				$j(this).parents('.form-group').find('.view_parent').hide();
			});

			$j('form').on('click', '.view_parent', function(){
				var pt = $j(this).attr('id').replace(/_view_parent$/, '');
				if($j(this).prevAll('input:hidden').length){
					var parent_id = $j(this).prevAll('input:hidden').eq(0).val();
				}else{
					var parent_id = $j(this).prevAll().children('input:hidden').eq(0).val();
				}

				/* handle radio lookups */
				if($j(this).prevAll('[type=radio]').length){
					parent_id = $j(this).prevAll('[type=radio]').eq(0).val();
				}

				if(parent_id != '{empty_value}' && parent_id != undefined && parent_id != ''){
					var parent_link = $j(this).parents('.form-group').children('label').data('parent_link');
					switch(parent_link){
						case 'view_parent_hidden':
							break;
						case 'view_parent_modal':
							modal_window({
								url: pt + '_view.php?Embedded=1&SelectedID=' + encodeURIComponent(parent_id),
								close: function(){
									var field_id = $j('#' + pt + '_view_parent').prevAll('input:hidden').eq(0).attr('id');
									$j('#' + field_id + '-container').select2('focus').select2('focus');
								},
								size: 'full',
								title: $j(this).attr('title')
							});
							break;
						case 'view_parent_same_window':
							window.location = pt + '_view.php?Embedded=' + (embedded_mode ? '1' : '') + '&SelectedID=' + encodeURIComponent(parent_id);
							break;
						case 'view_parent_new_window':
							window.open(pt + '_view.php?SelectedID=' + encodeURIComponent(parent_id));
							break;
					}

				}
			});


			/* load admin tools for admin user */
			if(!add_new_mode){
				$j('body').append('<div id="admin-tools-appendix"></div>');
				$j('#admin-tools-appendix').load(
					'ajax_admin_tools.php?table=titles&id=<%%URLVALUE(id)%%>',
					function(resp){
						if(!resp.length) return;
						$j.ajax('ajax_admin_tools.php?action=get_admin_tools_js&table=titles&id=<%%URLVALUE(id)%%>');
					}
				);
			}

			/* warn user if 'add new' clicked while unsaved changes exist */
			$j('#addNew').click(function(){
				if($j('#deselect.btn-warning').length){
					return confirm('<%%TRANSLATION(discard changes confirm)%%>');
				}
			});

		});
	</script>