{% extends "@UVDeskCoreFramework//Templates//layout.html.twig" %}

{% block title %}
	{{ 'Branding'|trans }}
{% endblock %}

{% block pageContent %}
    <style>
        .uv-image-upload-brick {
            margin: 10px 0px;
        }
        .uv-color-field {
            color: #fff;
            width: 100px;
            text-transform: uppercase;
        }
        .uv-header-link-wrapper {
            padding-bottom: 20px;
        }
        .uv-footer-link-wrapper {
            border-top: solid 1px #D3D3D3;
            padding-top: 20px;
        }
        .uv-knowledgebase-layout  {
            border-top: solid 1px #D3D3D3;
            padding-top: 20px;
            margin-top: 20px;
        }
        .uv-knowledgebase-layout input[type='radio'] {
            display: none;
        }
        #links .uv-field-block input:first-child {
            width: 200px;
            margin-bottom: 0;
        }
        #links .remove-link {
            margin-left: 10px;
        }
		.grammarly-fix-broadcast {
			max-width: 518px;
		}
        #uv-reset-colors {
            float: right;
            cursor: pointer;
            position: relative;
            z-index:1 ;
        }
    </style>

	<div class="uv-inner-section">		
		{# Append Panel Aside #}
		{% set asideTemplate = 'Webkul\\UVDesk\\CoreFrameworkBundle\\Dashboard\\AsideTemplate' %}
		{% set asideSidebarReference = 'Webkul\\UVDesk\\CoreFrameworkBundle\\UIComponents\\Dashboard\\Panel\\Sidebars\\Branding' %}

		{{ uvdesk_extensibles.getRegisteredComponent(asideTemplate).renderSidebar(asideSidebarReference) | raw }}

		<div class="uv-view {% if app.request.cookies and app.request.cookies.get('uv-asideView') %}uv-aside-view{% endif %}">
			<h1>{{ 'Branding'|trans }}</h1>
			<!--Tabs-->
			<div class="uv-tabs">
				<ul>
					<li for="general" {% if type == 'general' or type == '' %}class="uv-tab-active"{% endif %}>{{ 'General'|trans }}</li>
					<li for="knowledgebase" {% if type == 'knowledgebase' %} class="uv-tab-active"{% endif %}>{{ 'Knowledgebase'|trans }}</li>
                    <li for="time" {% if type == 'time' %}class="uv-tab-active"{% endif %}>{{ 'Time'|trans }}</li>
					<li for="seo" {% if type == 'seo' %}class="uv-tab-active"{% endif %}>{{ 'SEO'|trans }}</li>
					<li for="links" {% if type == 'links' %}class="uv-tab-active"{% endif %}>{{ 'Links'|trans }}</li>
                    <li for="advanced" {% if type == 'advanced' %}class="uv-tab-active"{% endif %}>{{ 'Advanced'|trans }}</li>
					<li for="broadcasting" {% if type == 'broadcasting' %}class="uv-tab-active"{% endif %}>{{ 'Broadcast Message'|trans }}</li>                  
				</ul>
			</div>
			<!--Tabs-->

			<!--Tab View-->
			<div class="uv-tab-view {% if type == 'general' or type == '' %}uv-tab-view-active{% endif %}" id="general">
				<!--Form-->
				<form method="post" action="{{ path('helpdesk_member_knowledgebase_theme', {'type': 'general'}) }}" id="generalSettingForm" enctype="multipart/form-data">
                    <!-- Image block -->
                    <div class="uv-image-upload-wrapper uv-no-error-success-icon">
                        <div class="uv-element-block">
                            <label class="uv-field-label">{{ 'Wide Logo'|trans }}</label>
                            <div class="uv-field-block">
                                {% set isLogo = websiteData.logo ? 1 : 0 %}
                                <div class="uv-image-upload-brick uv-image-upload-brick-200 {% if isLogo %}uv-on-drop-shadow{% endif %}" {% if isLogo %}style="border-color: transparent;"{% endif %}>
                                    <input type="file" name="website[logo]" id="uv-upload-profile" accept="image/*">
                                    <div class="uv-image-upload-placeholder">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="48" height="32" viewBox="0 0 48 32">
                                            <path fill="#7c74f1" fill-rule="evenodd" d="M26.516,22.252H21.477V17.226h-3.75L24,11.031l6.269,6.195h-3.75v5.026ZM29.973,8.138A9.1,9.1,0,0,0,24,6.005a8.947,8.947,0,0,0-4.863,1.4,9.78,9.78,0,0,0-3.457,3.682A7.494,7.494,0,0,0,9,18.512a7.2,7.2,0,0,0,2.2,5.289,7.234,7.234,0,0,0,5.3,2.192H32.727A6.294,6.294,0,0,0,39,19.739,5.933,5.933,0,0,0,37.3,15.5a6.113,6.113,0,0,0-4.1-1.958A9.112,9.112,0,0,0,29.973,8.138Z"/>
                                        </svg>
                                    </div>
                                    <img id="dynamic-image-upload" {% if isLogo %} src="{{ app.request.scheme ~'://' ~ app.request.httpHost ~ asset('') }}{{ websiteData.logo }}" {% endif %}>

                                </div>
                                <div class="uv-image-info-brick">
                                    <span class="uv-field-info">{{ 'Upload an Image (200px x 48px) in</br> PNG or JPG Format'|trans|raw }}</span>
                                </div>
                            </div>
                            <span class="uv-field-info">{{ 'It will be shown as Logo on Knowledgebase and Helpdesk'|trans }}</span>
                        </div>
                    </div>
                    <!-- //Image block -->

                    <!-- Field -->
					<div class="uv-element-block">
					  	<label class="uv-field-label">{{ 'Website Status'|trans }}</label>
                          <div class="uv-field-block">
                            <div class="uv-checkbox uv-margin-top-5">
                                <input type="checkbox" name="website[status]" style="cursor:pointer;" {{ configuration.status ? 'checked="checked"' : '' }} >
                                <span class="uv-checkbox-view"></span>
                            </div>
                            <span class="uv-field-info uv-margin-top-5">{{ 'Enable front end website and knowledgebase for customer(s)'|trans }}</span>
                        </div>
					</div>
					<!-- //Field -->

                    <!-- Field -->
					<div class="uv-element-block">
                        {##564DA8#}
					  	<label class="uv-field-label">{{ 'Brand Color'|trans }}</label>
					  	<div class="uv-field-block">
					    	<input name="website[brandColor]" class="uv-field uv-color-field" type="text" value="{{ configuration.brandColor ? configuration.brandColor : '#7C70F4'}}" style="background:{{ configuration.brandColor ? configuration.brandColor : '#7C70F4'}}" placeholder="#7C70F4">
					  	</div>
					</div>
					<!-- //Field -->
                    
					<!-- Field -->
					<div class="uv-element-block">
					  	<label class="uv-field-label">{{ 'Name'|trans }}</label>
					  	<div class="uv-field-block">
					    	<input name="website[name]" class="uv-field" type="text" value="{{ websiteData.name ? websiteData.name : '' }}">
					  	</div>
					</div>
					<!-- //Field -->

					<!--CTA-->
					<input class="uv-btn general-btn" href="#" value="{{ 'Save Changes'|trans }}" type="button">
					<!--//CTA-->
				</form>
				<!--//Form-->
			</div>
			<!--//Tab View-->

			<!--Tab View-->
            <div class="uv-tab-view {% if type == 'knowledgebase' %}uv-tab-view-active{% endif %}" id="knowledgebase">
                <!--Form-->
				<form method="post" action="{{ path('helpdesk_member_knowledgebase_theme', {'type': 'knowledgebase'}) }}" id="knowledgebaseForm">
                    <!-- Field -->
					<div class="uv-element-block">
                        <span  id="uv-reset-colors" class="uv-icon-history" data-toggle="tooltip" data-placement="right" title="{{ 'Use Default Colors'|trans }}"></span>
                        {##564DA8#}
					  	<label class="uv-field-label">{{ 'Page Background Color'|trans }}</label>
					  	<div class="uv-field-block">
					    	<input name="website[pageBackgroundColor]" class="uv-field uv-color-field" type="text" value="{{ configuration.pageBackgroundColor}}" style="background: {{ configuration.pageBackgroundColor ? configuration.pageBackgroundColor : '#FFFFFF' }}">
					  	</div>
					</div>
					<!-- //Field -->

                    <!-- Field -->
					<div class="uv-element-block">
                        {##564DA8#}
					  	<label class="uv-field-label">{{ 'Header Background Color'|trans }}</label>
					  	<div class="uv-field-block">
					    	<input name="website[headerBackgroundColor]" class="uv-field uv-color-field" type="text" value="{{ configuration.headerBackgroundColor ? configuration.headerBackgroundColor : '#FFFFFF' }}" style="background: {{ configuration.pageBackgroundColor ? configuration.headerBackgroundColor : '#FFFFFF' }}">
					  	</div>
					</div>
					<!-- //Field -->

                    <!-- Field -->
					<div class="uv-element-block">
                        {##564DA8#}
					  	<label class="uv-field-label">{{ 'Banner Background Color'|trans }}</label>
					  	<div class="uv-field-block">
					    	<input name="website[bannerBackgroundColor]" class="uv-field uv-color-field" type="text" value="{{ configuration.bannerBackgroundColor ? configuration.bannerBackgroundColor : '#70B5F4' }}" style="background: {{ configuration.bannerBackgroundColor ? configuration.bannerBackgroundColor : '#70B5F4' }}">
					  	</div>
					</div>
					<!-- //Field -->

                    <!-- Field -->
					<div class="uv-element-block">
                        {##564DA8#}
					  	<label class="uv-field-label">{{ 'Page Link Color'|trans }}</label>
					  	<div class="uv-field-block">
					    	<input name="website[linkColor]" class="uv-field uv-color-field" type="text" value="{{ configuration.linkColor  ? configuration.linkColor : '#C427A1' }}" style="background: {{ configuration.linkColor  ? configuration.linkColor : '#C427A1' }}">
					  	</div>
					</div>
					<!-- //Field -->

                    <!-- Field -->
					<div class="uv-element-block">
                        {##564DA8#}
					  	<label class="uv-field-label">{{ 'Page Link Hover Color'|trans }}</label>
					  	<div class="uv-field-block">
					    	<input name="website[linkHoverColor]" class="uv-field uv-color-field" type="text" value="{{ configuration.linkHoverColor  ? configuration.linkHoverColor : '#2750C4' }}" style="background: {{ configuration.linkColor  ? configuration.linkHoverColor : '#2750C4' }}">
					  	</div>
					</div>
					<!-- //Field -->

                    <!-- Field -->
					<div class="uv-element-block">
                        {##564DA8#}
					  	<label class="uv-field-label">{{ 'Article Text Color'|trans }}</label>
					  	<div class="uv-field-block">
					    	<input name="website[articleTextColor]" class="uv-field uv-color-field" type="text" value="{{ configuration.articleTextColor  ? configuration.articleTextColor : '#333333' }}" style="background: {{ configuration.linkColor  ? configuration.articleTextColor : '#333333' }}">
					  	</div>
					</div>
					<!-- //Field -->

                    <!-- Field -->
					<div class="uv-element-block">
					  	<label class="uv-field-label">{{ 'Tag Line'|trans }}</label>
					  	<div class="uv-field-block">
					    	<input name="website[siteDescription]" class="uv-field" type="text" value="{{ configuration.siteDescription ? configuration.siteDescription : '' }}" placeholder="{{ 'Hi! how can we help?'|trans }} ">
					  	</div>
					</div>
					<!-- //Field -->

                    <div class="uv-knowledgebase-layout uv-no-error-success-icon">
                        <div class="uv-element-block">
                            <label class="uv-field-label">{{ 'Layout '|trans }}</label>
                            <div class="uv-layout-icon-wrapper">
                                <label for="homepage-masonry" class="uv-layout-icon uv-layout-grid {% if configuration.homepageContent and configuration.homepageContent == 'masonry' %}uv-layout-icon-active{% endif %}" data-toggle="tooltip" title="{{ 'Masonry'|trans }}"></label>
                                <input name="website[homepageContent]" type="radio" id="homepage-masonry" value="masonry" {% if configuration.homepageContent and configuration.homepageContent == 'masonry' %}checked{% endif %}/>

                                <label for="homepage-folder" class="uv-layout-icon uv-layout-folder {% if configuration.homepageContent and configuration.homepageContent == 'folder' %}uv-layout-icon-active{% endif %}" data-toggle="tooltip" title="{{ 'Folder'|trans }}"></label>
                                <input name="website[homepageContent]" type="radio" id="homepage-folder" value="folder" {% if configuration.homepageContent and configuration.homepageContent == 'folder' %}checked{% endif %}/>

                                <label for="homepage-category" class="uv-layout-icon uv-layout-category {% if configuration.homepageContent and configuration.homepageContent == 'category' %}uv-layout-icon-active{% endif %}" data-toggle="tooltip" title="{{ 'Category'|trans }}"></label>
                                <input name="website[homepageContent]" type="radio" id="homepage-category" value="category" {% if configuration.homepageContent and configuration.homepageContent == 'category' %}checked{% endif %}/>

                                <label for="homepage-article" class="uv-layout-icon uv-layout-article {% if configuration.homepageContent and configuration.homepageContent == 'article' %}uv-layout-icon-active{% endif %}" data-toggle="tooltip" title="{{ 'Popular Article'|trans }}"></label>
                                <input name="website[homepageContent]" type="radio" id="homepage-article" value="article" {% if configuration.homepageContent and configuration.homepageContent == 'article' %}checked{% endif %}/>
                            </div>
                        </div>

                        <!-- Field -->
                        <div class="uv-element-block" style="margin: 20px 0">
                            <label>
                                <div class="uv-checkbox">
                                    <input name="website[ticketCreateOption]" type="checkbox" {{ configuration.ticketCreateOption ? 'checked="checked"':""}} />
                                    <span class="uv-checkbox-view"></span>
                                </div>
                                <span class="uv-checkbox-label">{{ 'Ticket Create Option'|trans }}</span>
                            </label>
                        </div>
					    <!-- //Field -->

                        <!-- Field -->
                        <div class="uv-element-block" style="margin: 20px 0">
                            <label>
                                <div class="uv-checkbox">
                                    <input name="website[loginRequiredToCreate]" type="checkbox" {{ configuration.loginRequiredToCreate ? 'checked="checked"':""}}/>
                                    <span class="uv-checkbox-view"></span>
                                </div>
                                <span class="uv-checkbox-label">{{ 'Login Required To Create Tickets'|trans }}</span>
                            </label>
                        </div>
					    <!-- //Field -->

                        <!-- Field -->
                        <div class="uv-element-block" style="margin: 20px 0">
                            <label>
                                <div class="uv-checkbox">
                                    <input name="website[removeCustomerLoginButton]" type="checkbox" value="1" {{ configuration.removeCustomerLoginButton ? 'checked="checked"':""}} />
                                    <span class="uv-checkbox-view"></span>
                                </div>
                                <span class="uv-checkbox-label">{{ 'Remove Customer Login/Signin Button'|trans }}</span>
                            </label>
                        </div>
                        <!-- //Field -->

                        <!-- Field -->
                        <div class="uv-element-block" style="margin: 20px 0">
                            <label>
                                <div class="uv-checkbox">
                                    <input name="website[disableCustomerLogin]" type="checkbox" value="1" {{ configuration.disableCustomerLogin ? 'checked="checked"':""}} />
                                    <span class="uv-checkbox-view"></span>
                                </div>
                                <span class="uv-checkbox-label">{{ 'Disable Customer Login'|trans }}</span>
                            </label>
                        </div>
                        <!-- //Field -->
                    </div>

                    <!-- CSRF token Field -->
                    {# <input type="hidden" name="website[_token]" value="{{ uvdesk_service.generateCsrfToken('website') }}"/> #}
                    <!-- //CSRF token Field -->

					<!--CTA-->
					<input class="uv-btn knowledgebase-btn" href="#" value="{{ 'Save Changes'|trans }}" type="button">
					<!--//CTA-->
                </form>
			</div>
			<!--//Tab View-->

            <!--Tab View-->
            <div class="uv-tab-view {% if type == 'seo' %}uv-tab-view-active{% endif %}" id="seo">
                <form method="post" action="{{ path('helpdesk_member_knowledgebase_theme', {'type': 'seo'}) }}" id="seoForm">

					<!-- Field -->
                    <div class="uv-element-block">
                        <label class="uv-field-label">{{ 'Meta Description (Recommended)'|trans }}</label>
                        <div class="uv-field-block">
                            <textarea name="metaDescription" class="uv-field">{{configuration.metaDescription ? configuration.metaDescription : "" }}</textarea>
                        </div>
                    </div>
					<!-- //Field -->

                    <!-- Field -->
                    <div class="uv-element-block">
                        <label class="uv-field-label">{{ 'Meta Keywords (Recommended)'|trans }}</label>
                        <div class="uv-field-block">
                            <textarea name="metaKeywords" class="uv-field">{{ configuration.metaKeywords ? configuration.metaKeywords : "" }}</textarea>
                        </div>
                    </div>
					<!-- //Field -->

                    <!-- CSRF token Field -->
                    <input type="hidden" name="_token" value=""/>
                    <!-- //CSRF token Field -->

					<!--CTA-->
					<input class="uv-btn seo-btn" href="#" value="{{ 'Save Changes'|trans }}" type="button">
					<!--//CTA-->
                </form>
			</div>
			<!--//Tab View-->

            <!--Tab View-->
            <div class="uv-tab-view {% if type == 'links' %}uv-tab-view-active{% endif %}" id="links">
                <form method="post" action="{{ path('helpdesk_member_knowledgebase_theme', {'type': 'links'}) }}" id="linksForm" class="uv-no-error-success-icon">

                    <div class="uv-header-link-wrapper">
                        <div class="links">
                            {% if configuration.headerLinks|length %}
                                {% for key, link in configuration.headerLinks %}
                                    <!-- Field -->
                                    <div class="uv-element-block">
                                        <label class="uv-field-label">{{ 'Header Link'|trans }} #{{key}}</label>
                                        <div class="uv-field-block">
                                            <input type="text" class="uv-field" name="headerLinks[{{key}}][label]" value="{{ link.label }}"  placeholder="{{ 'Label'|trans }}"/>
                                            <input type="text" class="uv-field" name="headerLinks[{{key}}][url]" value="{{ link.url }}"  placeholder="{{ 'URL (with http:// or https://)'|trans }}" />
                                            <a class="uv-btn-tag remove-link" href="#"><span class="uv-icon-remove-dark-box"></span></a>
                                        </div>
                                    </div>
                                    <!-- //Field -->
                                {% endfor %}
                            {% else %}
                                <!-- Field -->
                                <div class="uv-element-block">
                                    <label class="uv-field-label">{{ 'Header Link'|trans }} #1</label>
                                    <div class="uv-field-block">
                                        <input type="text" class="uv-field" name="headerLinks[1][label]" placeholder="{{ 'Label'|trans }}" />
                                        <input type="text" class="uv-field" name="headerLinks[1][url]" placeholder="{{ 'URL (with http:// or https://)'|trans }}" />
                                        <a class="uv-btn-tag remove-link" href="#"><span class="uv-icon-remove-dark-box"></span></a>
                                    </div>
                                </div>
                                <!-- //Field -->
                            {% endif %}
                        </div>

                        <a class="uv-btn-tag btn-add" href="#" data-type="header">
                            <span class="uv-icon-add-dark"></span> {{ 'Add More'|trans }}
                        </a>
                    </div>

                    <div class="uv-footer-link-wrapper">
                        <div class="links">
                            {% if configuration.footerLinks|length %}
                                {% for key, link in configuration.footerLinks %}
                                    <!-- Field -->
                                    <div class="uv-element-block">
                                        <label class="uv-field-label">{{ 'Footer Link'|trans }} #{{key}}</label>
                                        <div class="uv-field-block">
                                            <input type="text" class="uv-field" name="footerLinks[{{key}}][label]" value="{{ link.label }}"  placeholder="{{ 'Label'|trans }}"/>
                                            <input type="text" class="uv-field" name="footerLinks[{{key}}][url]" value="{{ link.url }}"  placeholder="{{ 'URL (with http:// or https://)'|trans }}" />
                                            <a class="uv-btn-tag remove-link" href="#"><span class="uv-icon-remove-dark-box"></span></a>
                                        </div>
                                    </div>
                                    <!-- //Field -->
                                {% endfor %}
                            {% else %}
                                <!-- Field -->
                                <div class="uv-element-block">
                                    <label class="uv-field-label">{{ 'Footer Link'|trans }} #1</label>
                                    <div class="uv-field-block">
                                        <input type="text" class="uv-field" name="footerLinks[1][label]" placeholder="{{ 'Label'|trans }}" />
                                        <input type="text" class="uv-field" name="footerLinks[1][url]" placeholder="{{ 'URL (with http:// or https://)'|trans }}" />
                                        <a class="uv-btn-tag remove-link" href="#"><span class="uv-icon-remove-dark-box"></span></a>
                                    </div>
                                </div>
                                <!-- //Field -->
                            {% endif %}

                        </div>

                        <a class="uv-btn-tag btn-add" href="#" data-type="footer">
                            <span class="uv-icon-add-dark"></span> {{ 'Add More'|trans }}
                        </a>
                    </div>

                    <!--CTA-->
                    <input class="uv-btn links-btn" style="margin-top: 15px;" href="#" value="{{ 'Save Changes'|trans }}" type="button">
                    <!--//CTA-->
                </form>
            </div>
            <!--//Tab View-->


                <!--Tab View-->
                <div class="uv-tab-view {% if type == 'advanced' %}uv-tab-view-active{% endif %}" id="advanced">
                    <form method="post" action="{{ path('helpdesk_member_knowledgebase_theme', {'type': 'advanced'}) }}" id="advancedForm">
                        <!-- Field -->
                        <div class="uv-element-block">
                            <label class="uv-field-label">{{ 'Custom CSS (Optional)'|trans }}</label>
                            <div class="uv-field-block">
                                <textarea name="customCSS" class="uv-field">{{ configuration.customCSS }}</textarea>
                            </div>
                            <span class="uv-field-info">{{ 'It will be add to the frontend knowledgebase only'|trans }}</span>
                        </div>
                        <!-- //Field -->

                        <!-- Field -->
                        <div class="uv-element-block">
                            <label class="uv-field-label">{{ 'Custom Javascript (Optional)'|trans }}</label>
                            <div class="uv-field-block">
                                <textarea name="script" class="uv-field">{{ configuration.script }}</textarea>
                            </div>
                            <span class="uv-field-info">{{ 'It will be add to the frontend knowledgebase only'|trans }}</span>
                        </div>
                        <!-- //Field -->

                        <!-- CSRF token Field -->
                        <input type="hidden" name="form[_token]" value="{{ uvdesk_service.generateCsrfToken('form') }}"/>
                        <!-- //CSRF token Field -->

                        <!--CTA-->
                        <input class="uv-btn advanced-btn" href="#" value="{{ 'Save Changes'|trans }}" type="button">
                        <!--//CTA-->
                    </form>
                </div>
                <!--//Tab View-->
        
            <!--Tab View-->
            <div class="uv-tab-view {% if type == 'broadcasting' %}uv-tab-view-active{% endif %}" id="broadcasting">
                {# {% set broadcastMessage = website.broadcastMessage|json_decode %} #}
                <form method="post" action="{{ path('helpdesk_member_knowledgebase_theme', {'type': 'broadcasting'}) }}" id="broadcastingForm">
                    <!-- Field -->
                    <div class="uv-element-block">
                        <label class="uv-field-label">{{ 'Broadcast Message'|trans }}</label>
                        <div class="uv-field-block">
                            <textarea name="broadcasting[message]" class="uv-field grammarly-fix-broadcast">{{ broadcast.message is defined ? broadcast.message : '' }}</textarea>
                        </div>
                        <span class="uv-field-info">{{ 'Broadcast message content to show on helpdesk'|trans }}</span>
                    </div>
                    <!-- //Field -->

                    <!-- Field -->
                    <div class="uv-element-block">
                        <label>{{ 'From'|trans }}</label>
                        <div class="uv-field-block date">
                            <input type="text" name="broadcasting[from]" class="uv-field datetime date-from uv-cal-icon" value="{{ broadcast.from is defined ? broadcast.from : '' }}">
                        </div>
                        <label>{{ 'To'|trans }}</label>
                        <div class="uv-field-block date">
                            <input type="text" name="broadcasting[to]" class="uv-field datetime date-to uv-cal-icon" value="{{ broadcast.to is defined ? broadcast.to : '' }}">
                        </div>
                        <span class="uv-field-info">{{ 'Time duration between which message will be displayed(if applicable)'|trans }}</span>
                    </div>
                    <!-- //Field -->
                    <div class="uv-element-block">
                        <label class="uv-field-label">{{'Broadcasting Status'|trans}}</label>
                        <div class="uv-element-block">
                            <label>
                                <div class="uv-checkbox">
                                    <input type="checkbox" name="broadcasting[isActive]" value="{{ broadcast is not empty and broadcast.isActive ? 1 : 0 }}" {{ broadcast is not empty and broadcast.isActive ? 'checked' : '' }}>
                                    <span class="uv-checkbox-view"></span>
                                </div>
                                <span class="uv-checkbox-label">{{'Broadcasting is Active'|trans}}</span>
                            </label>
                        </div>
                    </div>
                    <!-- CSRF token Field -->
                    <input type="hidden" name="form[_token]" value=""/>
                    <!-- //CSRF token Field -->

                    <!--CTA-->
                    <input class="uv-btn broadcasting-btn " href="#" value="{{ 'Save Changes'|trans }}" type="button">
                    <!--//CTA-->
                </form>
            </div>
            <!--//Tab View-->

            <!--Tab View-->
			<div class="uv-tab-view {% if type == 'time' %}uv-tab-view-active{% endif %}" id="time">
				<!--Form-->
                
				<form method="post" action="{{ path('helpdesk_member_knowledgebase_theme', {'type': 'time'}) }}" id="timeSettingForm">
					<!-- Field -->
					<div class="uv-element-block">
						<label class="uv-field-label">{{ 'Timezone'|trans }}</label>
						<div class="uv-field-block">
						    <select name="form[timezone]" class="uv-select">
						        {% for timezone in uvdesk_service.getTimezones() %}
						        	<option value="{{ timezone }}" {% if websiteData.timezone == timezone %}selected{% endif %}>{{ timezone }}</option>
						    	{% endfor %}
						    </select>
						</div>
						<span class="uv-field-info">{{ "Choose a default company timezone"|trans }}</span>
					</div>
					<!-- //Field -->

					<!-- Field -->
					<div class="uv-element-block">
						<label class="uv-field-label">{{ 'Date Time Format'|trans }}</label>
						<div class="uv-field-block">
						    <select name="form[timeFormat]" class="uv-select">
						        {% for key, timeFormat in uvdesk_service.getTimeFormats() %}
						        	<option value="{{ key }}" {% if websiteData.timeFormat == key %}selected{% endif %}>{{ timeFormat }}</option>
						    	{% endfor %}
						    </select>
						</div>
						<span class="uv-field-info">{{ 'Choose a format to convert date to specified date time format'|trans }}</span>
					</div>
					<!-- //Field -->

					<!--CTA-->
					<input class="uv-btn timezone-btn" href="#" value="{{ 'Save Changes'|trans }}" type="button">
					<!--//CTA-->
				</form>
				<!--//Form-->
			</div>
			<!--//Tab View-->

		</div>
	</div>
{% endblock %}

{% block footer %}
	{{ parent() }}
 <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/2.3.0/css/bootstrap-colorpicker.min.css">
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/2.3.0/js/bootstrap-colorpicker.min.js"></script>

    <script>
  		$('.datetime').datetimepicker({
			format: 'YYYY-MM-DD H:mm:ss',
            minDate: new Date()
		});
    </script>
    
    <!-- Header Link template -->
	<script id="header_link_tmp" type="text/template">
        <div class="uv-element-block">
            <label class="uv-field-label">{{ 'Header Link'|trans }} #<%= count %></label>
            <div class="uv-field-block">
                <input type="text" class="uv-field" name="headerLinks[<%= count %>][label]" placeholder="{{ 'Label'|trans }}" />
                <input type="text" class="uv-field" name="headerLinks[<%= count %>][url]" placeholder="{{ 'URL (with http:// or https://)'|trans }}" />
                <a class="uv-btn-tag remove-link" href="#"><span class="uv-icon-remove-dark-box"></span></a>
            </div>
        </div>
    </script>
    <!-- //Header Link template -->

    <!-- Footer Link template -->
	<script id="footer_link_tmp" type="text/template">
        <div class="uv-element-block">
            <label class="uv-field-label">{{ 'Footer Link'|trans }} #<%= count %></label>
            <div class="uv-field-block">
                <input type="text" class="uv-field" name="footerLinks[<%= count %>][label]" placeholder="{{ 'Label'|trans }}" />
                <input type="text" class="uv-field" name="footerLinks[<%= count %>][url]" placeholder="{{ 'URL (with http:// or https://)'|trans }}" />
                <a class="uv-btn-tag remove-link" href="#"><span class="uv-icon-remove-dark-box"></span></a>
            </div>
        </div>
    </script>
    <!-- //Footer Link template -->

	<script type="text/javascript">
		$(function () {
            $('.uv-color-field').colorpicker({format: "hex"}).on('changeColor', function(ev) {
                $(this).css('background', $(this).val())
                textColor = app.appView.getTextColorBasedBackground($(this).val());
                $(this).css('color', textColor)
            });

			var BrandingModel = Backbone.Model.extend({
			    validation: {
			    	'website[name]': {
				      	required: true,
				       	msg: '{{ "This field is mandatory"|trans }}'
				    },
			    	                  
                    'website[favicon]': [{
                            notEmptyFile: true,
                            msg: "{{ 'An empty file is not allowed.'|trans }}",
                        }, {
                            sizeLimit: true,
                            msg: "{{ 'File size must not be greater than 200KB !!'|trans }}",
                        }, {
                            imageFile: true,
                            msg: "{{ 'Please upload valid Image file (Only JPEG, JPG, PNG allowed)!!'|trans }}",
                        }
                    ],
                    'website[logo]': [{
                            notEmptyFile: true,
                            msg: "{{ 'An empty file is not allowed.'|trans }}",
                        }, {
                            sizeLimit: true,
                            msg: "{{ 'File size must not be greater than 200KB !!'|trans }}",
                        }, {
                            imageFile: true,
                            msg: "{{ 'Please upload valid Image file (Only JPEG, JPG, PNG allowed)!!'|trans }}",
                        }
                    ],
			    }
			});

            _.extend(Backbone.Validation.validators, {
                notEmptyFile: function(value, attr) {
                    var field = $('input[name="' + attr + '"]');
                    if(field.length && field[0].files && field[0].files.length ) {
                        var file = field[0].files[0];
                        if(file && 0 == file.size) {
                            return true; //error
                        }
                    }                    
                },
                sizeLimit: function(value, attr) {
                    var field = $('input[name="' + attr + '"]');
                    if(field.length && field[0].files && field[0].files.length ) {
                        var file = field[0].files[0];
                        if(file && file.size/1024 > 200) {
                            return true; //error                            
                        }
                    }                    
                },
                imageFile: function(value, attr) { 
                    var field = $('input[name="' + attr + '"]');
                    if(field.length && field[0].files && field[0].files.length ) {
                        var file = field[0].files[0];
                        if(file && file.type.indexOf('image/') != 0) {
                            return true; //error                            
                        }
                    }
                }
            });

			var BrandingForm = Backbone.View.extend({
			    events: {
			    	'click .general-btn': 'generalBrandingFormSubmit',
			        'click .pending-response-btn': 'pendingResponseSettingFormSubmit',
					'click .uv-btn': 'disableButton',
                    'change input[type="file"]': 'formChanegd',
                    'change .convertToSlug': 'convertToSlug',
                    'click .uv-btn-tag.btn-add': 'addMoreLink',
                    'click .remove-link': 'removeLink',
                    "change .uv-knowledgebase-layout input[type='radio']": 'layoutChanged',
                    'click #uv-reset-colors': 'resetDefaultColors',
			    },
                resetDefaultColors: function(e) {
                    var defaultColorArray = {
                        'pageBackgroundColor': '#FFFFFF',
                        'headerBackgroundColor': '#FFFFFF',
                        'bannerBackgroundColor': '#7C70F4',
                        'linkColor': '#2750C4',
                        'linkHoverColor': '#2750C4',
                        'articleTextColor': '#333333',
                        'brandColor': '#7C70F4',
                    };
                    $(e.target).addClass('uv-icon-history-active');
                    setTimeout(function () { 
                        $(e.target).removeClass('uv-icon-history-active');
                    }, 500);
                    $.each(defaultColorArray, function(index, value) {
                        var selectedField = $('input[name="website['+ index +']"]');
                        selectedField.val(value);
                        selectedField.trigger('changeColor');
                    });
                },
                headerLinkTemplate : _.template($("#header_link_tmp").html()),
                footerLinkTemplate : _.template($("#footer_link_tmp").html()),
			    initialize: function () {
                    $('.uv-color-field').each(function() {
                        textColor = app.appView.getTextColorBasedBackground($(this).val());
                        $(this).css('color', textColor)
                    });

			        Backbone.Validation.bind(this);			      
			    },
			    formChanegd: function(e) {
                    if(!Backbone.$(e.currentTarget).parents('.links').length) {
                        this.model.set(Backbone.$(e.currentTarget).attr('name'), Backbone.$(e.currentTarget).val())
                        this.model.isValid([Backbone.$(e.currentTarget).attr('name')])
                    }
			    },          
			    generalBrandingFormSubmit: function (e) {
			        e.preventDefault();
			        this.model.set($('#generalSettingForm').serializeObject());
                        console.log("form_submited fail");
                    
			        if(this.model.isValid(true)) {
			           $("#generalSettingForm").submit();
			        }
			    },
			    pendingResponseSettingFormSubmit: function (e) {
			        e.preventDefault();
			        this.model.set($('#pendingResponseSettingForm').serializeObject());
			        if(this.model.isValid('website[pendingSince]')) {
						$('.pending-response-btn').attr('disabled', 'disabled');
			            $("#pendingResponseSettingForm").submit();
			        }
			    },
				disableButton: function(e) {
					var form = Backbone.$(e.currentTarget).parents('form');
					if(form.attr('id') == 'seoForm' || form.attr('id') == 'advancedForm' || form.attr('id') == 'knowledgebaseForm') {
						Backbone.$(e.currentTarget).attr('disabled', 'disabled');
						form.submit()
					}
				},
                convertToSlug: function(e) {
                    Backbone.$(e.currentTarget).val(app.appView.convertToSlug(Backbone.$(e.currentTarget).val()));
                },
                addMoreLink: function(e) {
                    e.preventDefault();

                    var currentElement = Backbone.$(e.currentTarget);
                    if(currentElement.attr('data-type') == 'header') {
                        count = $('.uv-header-link-wrapper .uv-element-block').length + 1;
                        $('.uv-header-link-wrapper .links').append(this.headerLinkTemplate({'count' : count}))
                    } else {
                        count = $('.uv-footer-link-wrapper .uv-element-block').length + 1;
                        $('.uv-footer-link-wrapper .links').append(this.footerLinkTemplate({'count' : count}))
                    }
                },
                removeLink: function(e) {
                    e.preventDefault()
                    Backbone.$(e.currentTarget).parents('.uv-element-block').remove()
                },
                layoutChanged: function(e) {
                    var currentElement = Backbone.$(e.currentTarget);
                    $('.uv-layout-icon').removeClass('uv-layout-icon-active');

                    $("label[for='" + currentElement.attr('id') + "']").addClass('uv-layout-icon-active');
                }
			});
            
            var brandingForm = new BrandingForm({
		        el: 'form',
		        model: new BrandingModel()
		    });
            
            var BroadcastModel = Backbone.Model.extend({
			    validation: {
			    	'broadcasting[message]': [{
				      	required: true,
				       	msg: '{{ "This field is mandatory"|trans }}'
				    },
                    {
						maxLength: 300,
						msg: '{{ "This field should contains maximum 300 characters."|trans }}'
					}],
			    }
			});

			var BroadcastForm = Backbone.View.extend({
                el: '#broadcastingForm',
			    events: {
			    	'click .broadcasting-btn': 'broadcastingFormSubmit',
                    'change textarea': 'formChanged',
			    },
                initialize: function() {
                    Backbone.Validation.bind(this);
                },
			    formChanged: function(e) {
                    if(!Backbone.$(e.currentTarget).parents('.links').length) {
                        this.model.set(Backbone.$(e.currentTarget).attr('name'), Backbone.$(e.currentTarget).val())
                        this.model.isValid([Backbone.$(e.currentTarget).attr('name')])
                    }
			    },
                broadcastingFormSubmit: function(e) {
					var form = Backbone.$(e.currentTarget).closest('form')
                    if(form.attr('id') == 'broadcastingForm') {
                        data = form.serializeObject();
                        this.model.set(data);
                        if(this.model.isValid(true)) {
                            Backbone.$(e.currentTarget).attr('disabled', 'disabled');
                            form.submit()
                        }
                    }
                }
		    });

            var LinksModel = Backbone.Model.extend({
			    validation: {
			    }
			});

			var LinksForm = Backbone.View.extend({
                el: '#linksForm',
                initialize: function() {
                    Backbone.Validation.bind(this);
                },                
                events: {
                    'click .links-btn': 'validateLinks',
                },
                validateLinks: function(e) {
                    e.preventDefault();
                    var data = $('#linksForm').serializeObject();
                    var self = this; var valid = true;
                    $.each(data, function(key, value) {
                        if(key.indexOf('[url]') != -1 && value && !value.match('^(http:\/\/www\.|https:\/\/www\.|http:\/\/|https:\/\/)[a-z0-9]+([\-\.]{1}[a-z0-9]+)*\.[a-z]{2,5}(:[0-9]{1,5})?(\/.*)?$')) {
    		    			Backbone.Validation.callbacks.invalid(self, key, '{{ "Provide a valid url(with protocol)"|trans }}', 'input');
                            valid = false;
                        } else {
    		    			Backbone.Validation.callbacks.valid(self, key, '{{ "Provide a valid url(with protocol)"|trans }}', 'input');                            
                        }
                    });
                    if(valid) {
						$('.links-btn').attr('disabled', 'disabled');
			            $("#linksForm").submit();
			        }
                },                      
            });

            var TimezoneForm = Backbone.View.extend({
                el: '#timeSettingForm',
			    events: {
			    	'click .timezone-btn': 'timezoneFormSubmit',
                    
			    },
                timezoneFormSubmit: function(e) {
					var form = Backbone.$(e.currentTarget).closest('form')
                    
                    if (form.attr('id') == 'timeSettingForm') {
                        data = form.serializeObject();
                        form.submit()
                    }
                }
		    });

            var time = new TimezoneForm();

            var broadcastForm = new BroadcastForm({
                model: new BroadcastModel()
            });

			var linksForm = new LinksForm({
                model: new LinksModel()                
            });
        });
	</script>
{% endblock %}