var ManageTemplate = function(core, target, data, returnCB, templateId, campaignId){
	var events = new EventManager,
		data = null,
		element = null,
		elements = null;

	var action = getAction();

	this.exit = exit;

	if(action === 'edit') new ApiManager({ 'campaignTemplate' : null }, templateId, init);
	else if(action === 'create') init(null, {});

	function Data(d){
		this.name = getValue(d, 'name', '');
		this.icon = getValue(d, 'icon', '');
		this.tags = getValue(d, 'tags', []);
		this.description = getValue(d, 'description', '');

		this.action = capitalizeN(0, action);

		function getValue(d, k, r){ if(r === undefined) r = null; if(isDefined(d) && isDefined(d[k])) return d[k]; else return r; }
	}

	Data.prototype.set = function(k, v){ this[k] = v; }

	function Template(){
		var header = '<header><h2>{{ action }} Campaign Template</h2></header>',
			name = '<row><h3>Template Name:</h3><input type="text" class="name" placeholder="Template name" value="{{ name }}" /></row>',
			icon = '<row class="icon"><h3>Template Icon:</h3><div class="iconCntr"><img class="iconImg {{^ hasIcon }}noDisplay{{/ hasIcon }}" src="{{ icon }}" /><a href="#" class="mint button iconButton tidySmall">Upload 200x200</a></div></row>',
			tags = '<row class="tags"><h3>Tags:</h3></row>',
			infoIntro = '<p><b>Your template will appear in the app store under "Campaign Templates". Once your template has been shared you cannot remove it as others might be using it within an active campaign. Sharing templates is a great way to increase your rep and make you an industry icon.</b></p>',
			tipOne = '<p><b>- Make an eye catching template icon</b></p>',
			tipTwo = '<p><b>- Name your template using relevant terms</b></p>',
			tipThree = '<p><b>- Put tips and use cases within your description</b></p>',
			tipFour = '<p><b>- Upload a YouTube tutorial or screenshots of your template performance or settings</b></p>',
			tipFive = '<p><b>- Add relevant tags to help users find your template</b></p>',
			infoTips = '<p class="tips"><b>Tips:</b></p>' + tipOne + tipTwo + tipThree + tipFive,
			description = '<row><h3>Description:</h3><textarea class="description" placeholder="Template description">{{ description }}</textarea></row>',
			sidePanel = '<side-panel><section><h2>Instructions:</h2><info>' + infoIntro + infoTips + '</info></section></side-panel>',
			section = '<section><container>' + name + icon + tags + description + '</container>' + sidePanel + '</section>',
			footer = '<footer><a href="#" class="mint button saveButton">Save Template</a></footer>';
		return '<div class="createPage manageCampaignTemplate">' + header + section + footer + '</div>';
	}

	function init(error, d){
		data = new Data(d.campaignTemplate);
		element = getElementFromString(render(Template(), data));
		setElements(data);
		returnCB();
		target.appendChild(element);

		events.add(elements.name, 'change', updateName);
		events.add(elements.iconButton, 'click', elements.iconUpload.open);
		events.add(elements.description, 'change', updateDescription);
		events.add(elements.save, 'click', function(){ new Save; });
	}

	function getAction(){
		if(templateId !== null) return 'edit'
		else if(campaignId !== null) return 'create'
		else return null
	}

	function setElements(d){
		elements = new Elements(element, {
			'name' : { 'selector' : '.name' },
			'iconButton' : { 'selector' : '.iconButton' },
			'iconImg' : { 'selector' : '.iconImg' },
			'iconUpload' : { 'target' :  new ImageUpload(element, updateIcon) },
			'tags' : { 'target' : new TagContainer(element.querySelector('.tags'), { 'limit' : 10, 'data' : d.tags }, updateTags) },
			'description' : { 'selector' : '.description' },
			'save' : { 'selector' : '.saveButton' }
		});
	}

	function updateName(e){ data.set('name', e.target.value); }
	function updateIcon(e){
		if(e.width === 200 && e.height === 200){
			elements.iconImg.src = e.data;
			elements.iconImg.classList.remove('noDisplay');
			data.set('icon', e.data);
		} else {
			core.notifications.setError("I'm sorry, but your image must be 200x200, your image is " + e.width + "x" + e.height + ".");
		}
	}
	function updateTags(e){ data.set('tags', e); }
	function updateDescription(e){ data.set('description', e.target.value); }

	// Set this up
	function Save(){
		var err = getErrors();
		if(err.length > 0) return core.notifications.setMissingFields(err);
		if(action === 'edit') apiRequest('PUT', 'campaignTemplate', templateId, data, saveCb);
		else apiRequest('POST', 'campaignTemplate/' + campaignId, core.userID, data, saveCb);

		function getErrors(){
			var err = [];
			if(data.name.length === 0) err.push('Name cannot be empty');
			if(data.icon.length === 0) err.push('Icon must be set');
			if(data.tags.length === 0) err.push('At least one tag must be declared');
			if(data.description.length === 0) err.push('Description cannot be empty');
			return err;
		}

		function saveCb(e, s){
			if(s === 200) return pop('Pop!', 'Dashboard - Campaigns', '/dashboard/campaigns');
			core.notifications.setError({ 'message' : (e && e.error) ? e.message : 'Oops, server error, please try to save again in few seconds.'});
		}
	}

	function exit(){ target.removeChild(element); if(events) events.reset(); if(elements) elements.exit(); }
};