%h2{:align => 'right'} Preview
.preview-selection
	%select#preview_popup_post_select
		-$posts = get_posts(array('posts_per_page' => 10,'orderby' => 'post_date','order' => 'DESC','post_type' => 'post'))
		-$pages = get_pages(array('sort_order' => 'ASC', 'sort_column' => 'post_title', 'post_type' => 'page','post_status' => 'publish'))

		%optgroup{:label => 'Posts'}
			-foreach($posts as $post)
				%option{:value => "#{MOBILOUD_PLUGIN_URL}/post/post.php?post_id=#{$post->ID}"}
					-if(strlen($post->post_title) > 40)
						=substr($post->post_title,0,40)
						...
					-else
						=$post->post_title

		%optgroup{:label => 'Pages'}
			-foreach($pages as $page)
				%option{:value => "#{MOBILOUD_PLUGIN_URL}/post/post.php?post_id=#{$page->ID}"}
					-if(strlen($page->post_title) > 40)
						=substr($page->post_title,0,40)
						...
					-else
						=$page->post_title

	.devices
		.ipadmini-device-btn
			%img{:class => 'open_preview_btn', :src => "#{MOBILOUD_PLUGIN_URL}/images/ipadmini_120.png"}
			iPad

		.iphone5s-device-btn
			%img{:class => 'open_preview_btn', :src => "#{MOBILOUD_PLUGIN_URL}/images/iphone5s_100.png"}
			iPhone

		.clearfix

	.description
		%p You can customize CSS, JavaScript and PHP code.

		%p 
			In PHP customizations you have the object 
			%b $post 
			available.
			%br
			To see if $post is representing a page, just use the wordpress code

		%b is_page($post->ID)


#preview_popup_content

	.iphone5s_device
		%iframe{:id => 'preview_popup_iframe'}

	.ipadmini_device
		%iframe{:id => 'preview_popup_iframe'}