{if !$vars.ajax}
    <div class="category_view_box">

        <section class="b-single-challenge__intro">
            <h1 class="b-single-challenge__title type-style-headerXL">{"Create blog post"|gettext}</h1>
        </section>
    </div>
{/if}
    
{if $action eq 'update'}
        <form action="/blogpost/update/{$post->data.post_id|intval}" method="post" id="blogForm" class="blogForm {if $vars.ajax}noMargin{/if}" >
{else}
        <form action="/blogpost/add" method="post" id="blogForm" class="blogForm {if $vars.ajax}noMargin{/if}" >    
{/if}
    
  <div class="mdl-grid -x2">
    <div class="mdl-grid__col -x4">
    	<ul class="innerPanel mdl-blog__sidebar__panel mdl-form__group" {if $vars.ajax eq true}style="margin-top:0px;"{/if}>
        <li class="mdl-form__item">
          <label class="mdl-form__label" for="post_category">{"Blog category"|gettext}</label>
          <select name="post_category" id="post_category" class="postfield-dropdown-type mdl-form__input -select">
            <option value="0" {if $post->data.post_category eq 0}selected="selected" {/if}>{"Uncategorised"|gettext}</option>
            {foreach from=Blogcategory::$list item=cCategory}
              <option value="{$cCategory->data.category_id}" {if $post->data.post_category eq $cCategory->data.category_id}selected="selected"{/if}>&nbsp;&nbsp;&nbsp;&nbsp;{$cCategory->data.category_name|truncate:30}</option>
            {/foreach}
          </select>
        </li> 
        <li class="associatedContainer mdl-form__item">
          <label class="mdl-form__label" for="postSearch">{"Associated ideas and challenges"|gettext}</label>
          <input type="text" name="postSearch" id="postSearch" value="" class="formElement mdl-form__input" placeholder="Type the name of an idea or challenge" onkeyup="updatePostSearch();" />
          <div class="newPost_associatedItems">
              <div id="associatedPostsList">
                  {foreach from=$associatedPosts item=cAP}
                      <div id="associated_postLinkIdCont:{$cAP->data.post_id}" class="tagbox-match">
                          <a href="/post/{$cAP->data.post_id}" id="associated_postLinkId:{$cAP->data.post_id}" target="_blank">{$cAP->data.post_title|truncate:30}</a>
                          <span class="closer" onclick="searchToggleId({$cAP->data.post_id},'associatedPosts','postSearchPreviewOption:{$cAP->data.post_id}'); return false;">X</span>
                      </div>
                  {/foreach}
              </div>
              <div id="associatedTopicsList">
                  {foreach from=$associatedCategories item=cAC}
                      <div id="associated_catLinkIdCont:{$cAC->data.category_id}" class="tagbox-match">
                          <a href="/category/{$cAC->data.category_id}" id="associated_catLinkId:{$cAC->data.category_id}" target="_blank">{$cAC->data.category_name}</a>
                          <span class="closer" onclick="searchToggleId({$cAC->data.category_id},'associatedCategories','categorySearchPreviewOption:{$cAC->data.category_id}'); return false;">X</span>
                      </div>                             
                  {/foreach}
              </div>
          </div>
          <div id="postSearchResults_tabContainer" class="overlayBox GB_dropDownPersist" style="display:none;">
              <div class="selectorTabs crowdworksTabs" id="searchFilterSelectorTabs">
                  <ul>
                      <li {if $smarty.request.searchBy eq 'ideas' || !isset($smarty.request.sortBy)}class="selected"{/if}><a href="#" id="tab_ideas">{"Ideas"|gettext}</a></li>
                      <li {if $smarty.request.searchBy eq 'topics'}class="selected"{/if}><a href="#" id="tab_topics">{"Challenges"|gettext}</a></li>
                  </ul>
              </div>

              <div class="selectorTabsView">
                  <div id="viewtab_ideas">
                      <div id="postSearchResults_container"></div>
                  </div>
                  <div id="viewtab_topics">
                      <div id="topicsSearchResults_container"></div>
                  </div>
              </div>
          </div>
        </li>
      </ul>

      <input type="hidden" name="associatedPosts" id="associatedPosts" value="{$associatedPostsIds}" />
      <input type="hidden" name="associatedCategories" id="associatedCategories" value="{$associatedCategoriesIds}" />

      <div class="mdl-file-container">
        <label for="filesUpload" class="mdl-form__label">{"Upload additional files"|gettext}</label>
        <div class="mdl-file b-single-post--file b-single-post--filesInput ">
          <div class="mdl-file__upload">
            <div class="mdl-file__upload-prompt">
              <p>{"Drop files here or click the button below"|gettext}</p>
              <div>
                <a class="non-ie89" class="mdl-button -small" onclick="jQuery(this).siblings('input.cloudinary-fileupload[type=file], input.mirp-fileupload[type=file]').click(); return false;" href="#">{"Attach files"|gettext}</a>
                {if isset($mirpURL)}
                    <input class="mirp-idea-files-upload mirp-fileupload hidden" onchange="Post.uploadMirp(event, '{$mirpURL}', false, 'blogForm', '{$authToken}', '{$communityId}', '{$db_code}')" name="file" type="file" accept="{implode(File::getAllowedExtensions(), ',')}" multiple='1' />
                {else}
                    {cl_image_upload_tag('image_id', ['chunk_size' => 20000000, 'callback' => $vars.cloudinaryConfig.callback, 'eager'=>[['format' => 'webm'], ['format' => 'mp4' ]], 'eager_async'=> true, 'eager_notification_url' => File::getEagerNotificationUrl(), 'use_filename'=>true, 'allowed_formats' =>File::getAllowedExtensions(), 'html' => ['multiple'=>true, 'class'=>'cloudinary-idea-files-upload', 'id'=>'filesUpload']])}
                {/if}
              </div>
            </div>
          </div>
        </div>
        <div class="b-single-post--file-list mdl-file__list-wrapper">
          <div class="mdl-file__list">
            <div class="b-single-post--file-item templateItem mdl-file__list-item" style="display:none !important;">
                          <img src="{$vars.resourcesUrl}filetypes/22/txt.png" alt="File type icon" />
                          <div class="b-single-post--file-item-name mdl-file__list-item-name">fileName.pdf</div>
              <a href="#" class="remove-file right mdl-file__list-item-control" style="display:none;"><span class="mdl-icon -s"><svg><use href="#delete"></use></svg></span></a>
                          <div class="b-single-post--file-item-bar mdl-file__list-item-progress"></div>
            </div>
            {counter start=0 print=false}
              {foreach from=$selectedFilesV2.all item=f}
                  {counter assign=itemNum}
                <div class="b-single-post--file-item existingFile b-single-post--file-item-count-{$itemNum} mdl-file__list-item">
                    {if in_array($f->data['file_extension'], File::$allowedImageExtensions)}
                      <img src="{$f->getCloudinaryURL(20,20)}" />
                    {else}
                      <img src="{$vars.resourcesUrl}filetypes/22/{$f->data['file_extension']}.png" />
                    {/if}
                    <div class="b-single-post--file-item-name mdl-file__list-item-name">{$f->data['file_name']}</div>
                    <a href="#" class="remove-file right mdl-file__list-item-control" data-filecount="{$itemNum}" data-fileurl="{$f->data['file_hash']}"><span class="mdl-icon -s"><svg><use href="#delete"></use></svg></span></a>
                    <div class="b-single-post--file-item-bar mdl-file__list-item-progress"><!--IE--></div>
                </div>
            {/foreach}
          </div>
          <input type="hidden" name="fileHashes[nonHeader]" value="{','|implode:$fileHashes.all}" />
        </div>
      </div>
    </div>
    <div class="mdl-grid__col -x8">
        {if (isset($errors.post_id))}<div class="formError">{$errors.post_id}</div>{/if}
        <div class="divider">
            {if (isset($errors.post_category))}<div class="formError">{$errors.post_category}</div>{/if}
            <div id="categoryInfo" style="display:none;">
                <div id="categoryInfoInner">
                </div>
            </div>
        </div>

        <div class="b-single-post--label">
            <label class="mdl-form__label" for="post_title">{"Title"|gettext}</label>
        </div>

        <div class="b-single-post--note">
            {"The name of your blog post"|gettext}
        </div>

        <div class="b-single-post--field mdl-form__item">
            <input type="text" name="post_title" id="post_title" class="formElement mdl-form__input -full-width" value="{$post->data.post_title|escapeonce}" />
            <div class="mdl-alert -error" {if (!isset($errors.post_title))}style="display:none;" id="error_post_title"{/if}>{$errors.post_title}</div>
            <div class="clear"><!--IE--></div>
        </div>

        <div class="b-single-post--label">
            <label class="mdl-form__label" for="post_text">{"Post"|gettext}</label>
        </div>
        <div class="b-single-post--note">
            {"The main content of your blog post"|gettext}
        </div>
            <textarea name="post_text" id="post_text" class="mdl-form__input -textarea">{$post->data.post_text}</textarea>
            <div class="mdl-alert -error" {if (!isset($errors.post_text))}style="display:none;" id="error_post_text"{/if}>{$errors.post_text}</div>

        <div class="clear"><!--IE--></div>
        {if $post->data.post_id ne 0}
          <div class="mdl-form__button-row">
            {if $post->data.post_moderationstatus eq 4}
                <select name="saveMode" class="formElement right mdl-form__input -select" onchange="if ($F(this)=='draft'){ $('finishButton').update('{"Save to drafts"|gettext}'); } else { $('finishButton').update('{"Publish"|gettext}'); }">
                    <option value="live">{"Publish now"|gettext}</option>
                    <option value="draft" selected="selected">{"Save to drafts"|gettext}</option>
                </select>
            {/if}
            <a href="/blog" onclick="if (confirm('{"Are you sure? Any changes you have made will be lost"|gettext}')){ closePopUp(); } return false;" class="right form_button_marginLeft mdl-button -tertiary">{"Cancel"|gettext}</a>
            <a href="#" class="mdl-button -primary" id="finishButton">
              {if $post->data.post_moderationstatus eq 4}{"Save to drafts"|gettext}{else}{"Publish"|gettext}{/if}
            </a>
            </div>
            <input type="hidden" name="post_id" id="post_id" value="{$post->data.post_id}" />
        {else}
          <div class="mdl-form__button-row">
              <select name="saveMode" class="formElement right mdl-form__input -select -s" onchange="if ($F(this)=='draft'){ $('finishButton').update('{"Save to drafts"|gettext}'); } else { $('finishButton').update('{"Publish"|gettext}'); }">
                  <option value="live">{"Publish now"|gettext}</option>
                  <option value="draft">{"Save to drafts"|gettext}</option>
              </select>
              <a href="/blog" class="right form_button_marginLeft mdl-button -tertiary" onclick="return confirm('{"Are you sure? Any changes you have made will be lost"|gettext}');">{"Cancel"|gettext}</a>
              <a href="#" class="mdl-button -primary" id="finishButton">{"Publish"|gettext}</a>
          </div>
        {/if}
        <input type="hidden" name="filelinks" id="filelinks" value="{$selectedFileIdsString}" />
       
    </div>
  </div>
    <input type="hidden" name="post_type" id="post_type" value="{if isset($post->data.post_type)}{$post->data.post_type}{elseif isset($smarty.request.post_type)}{$smarty.request.post_type|escapeonce}{else}0{/if}" />
    <div class="clear"><!--IE--></div>
</form>

<script type="text/javascript">
    Post.initForm('blogForm');
    
	tinyMCE.init({
		mode: "exact",
		elements : "post_text",
		theme : "crowdworks",
		language : "en",
		file_browser_callback : "cwMCEFileBrowser",
		theme_crowdworks_buttons1 : "bold,italic,formatselect,removeformat,|,bullist,numlist,|,undo,redo,|,link,unlink,cleanup,|,image",
		plugins : "advlink,advimage,inlinepopups,preview,searchreplace,print,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,wordcount,advlist",
		width: "100%",
		height: "320",
		relative_urls : false,
		remove_script_host : false,
		convert_urls : false,
		document_base_url : "/"
	});

Event.observe($('finishButton'), 'click', function(event) {
	jQuery('.bottomButtonsBusy').show();
	var editor=tinyMCE.get('post_text');
    if (editor!=undefined){
        $('blogForm').select('#post_text')[0].setValue(editor.getContent());
    }

	$('blogForm').request({
		method: 'post',
		onComplete: function(transport){
			var jsonObj=transport.responseJSON;
			if (jsonObj.success==1){
                {if $vars.ajax eq true}
				if ($('post_id')!=null){
					var post_id=$('post_id').getValue();
					if ($('postViewBox')!=null){
						//If there's a postViewBox, just replace that
						new Ajax.Updater('postViewBox', '/blogpost/'+post_id+'?postType=viewPost');
					}
				}
				closePopUp();
                {else}
                    window.location.href = '/blogpost/' + jsonObj.post_id;
                {/if}
			} else {
				message=jsonObj.message;
				var errorList="";
				if (jsonObj.errors!=undefined){
					errors=jsonObj.errors;
					for (var key in errors) {
						if (errors.hasOwnProperty(key)) {
							//alert(key + " -> " + p[key]);
							errorList=errorList+errors[key]+". ";
                            errorElement=$('error_'+key);
                            if (errorElement!=null){
                                errorElement.update(errors[key]);
                                errorElement.show();
                            }
                            /*fieldElement=$(key);
                            if (fieldElement!=null){
                                fieldElement.addClassName('formError');
                            }*/
						}
					}
					message=message+": "+errorList;
				}
				alert(message);
				jQuery('.bottomButtonsBusy').hide();
			}
		}
	});
	Event.stop(event);
});

</script>