    <div class="row">
        <div class="col-12">
            <pre class="with-hljs"><code class="lang-html">&lt;div id=&quot;mb-settings&quot; class=&quot;mb-page&quot;&gt;
	
	&lt;div class=&quot;mb-subscribe&quot; style=&quot;display:none;&quot;&gt;
		&lt;div class=&quot;wrap&quot;&gt;
			&lt;div class=&quot;mb-subscribe-text&quot;&gt;Subscribe to email updates and get 10% OFF Mango Buttons PRO.&lt;/div&gt;
			&lt;form data-bind=&quot;submit: subscribe&quot;&gt;
				&lt;input type=&quot;text&quot; placeholder=&quot;Email&quot; spellcheck=&quot;false&quot; data-bind=&quot;value: settings.email, valueUpdate: &#039;keyup&#039;&quot; /&gt;
				&lt;input type=&quot;submit&quot; value=&quot;SUBSCRIBE&quot; data-bind=&quot;enable: !subscribing(), value: subscribing() ? &#039;Subscribing...&#039; : &#039;SUBSCRIBE&#039;&quot; /&gt;
			&lt;/form&gt;
		&lt;/div&gt;
	&lt;/div&gt;
	
	&lt;div class=&quot;wrap&quot;&gt;
		
		&lt;div class=&quot;mb-header&quot;&gt;
			&lt;div class=&quot;mb-page-icon&quot;&gt;&lt;/div&gt;
			&lt;h2 class=&quot;mb-header-text&quot;&gt;
				&lt;span&gt;Mango Buttons Settings &amp;nbsp;&lt;span data-bind=&quot;with: notification()&quot;&gt;&lt;span class=&#039;mb-header-notification&#039; data-bind=&quot;css: {&#039;mb-success&#039;: status == &#039;success&#039;, &#039;mb-failure&#039;: status == &#039;failure&#039;}&quot;&gt;&lt;i class=&quot;fa fa-check&quot; data-bind=&quot;visible: status == &#039;success&#039;&quot;&gt;&lt;/i&gt;&lt;i class=&quot;fa fa-exclamation-triangle&quot; data-bind=&quot;visible: status == &#039;failure&#039;&quot;&gt;&lt;/i&gt;&amp;nbsp;&lt;span data-bind=&quot;text: text&quot;&gt;&lt;/span&gt;&lt;i class=&quot;fa fa-times-circle&quot; data-bind=&quot;click: $root.dismissNotification&quot;&gt;&lt;/i&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;
			&lt;/h2&gt;
		&lt;/div&gt;
		
		&lt;div class=&quot;mb-main-content&quot;&gt;
		
			&lt;div class=&quot;mb-loading-page-placeholder&quot; data-bind=&quot;visible: syncingDataWithServer()&quot;&gt;
				&lt;i class=&quot;fa fa-spin fa-spinner&quot; style=&quot;font-size:100px;text-align:center;width:100%;padding:100px 0;color:#DDD;&quot;&gt;&lt;/i&gt;
			&lt;/div&gt;
			
			&lt;div style=&quot;display:none;&quot; class=&quot;mb-options-list&quot; data-bind=&quot;visible: !syncingDataWithServer(), with: settings&quot;&gt;
				
				&lt;div class=&quot;option-element&quot;&gt;
					&lt;h6&gt;Editor Icon&lt;/h6&gt;
					&lt;p&gt;Do you want the mango-colored icon (&quot;color&quot;) or grayscale? &lt;small&gt;( &lt;img class=&quot;tiny-mce-color-small&quot; /&gt;&amp;nbsp; OR &amp;nbsp;&lt;img class=&quot;tiny-mce-grayscale-small&quot; /&gt; )&lt;/small&gt;&lt;/p&gt;
					
					&lt;ul&gt;
						&lt;li data-bind=&quot;click: function(){ icon_color(&#039;color&#039;); }, css: { selected: icon_color() == &#039;color&#039; }&quot;&gt;COLOR&lt;/li&gt;
						&lt;li data-bind=&quot;click: function(){ icon_color(&#039;grayscale&#039;); }, css: { selected: icon_color() == &#039;grayscale&#039; }&quot;&gt;GRAYSCALE&lt;/li&gt;
					&lt;/ul&gt;
					
				&lt;/div&gt;
				
				&lt;div class=&quot;option-element&quot;&gt;
					&lt;h6&gt;Extended Language Support&lt;/h6&gt;
					&lt;p&gt;Enabling support for extended languages will include the latin-ext character set.&lt;/p&gt;
					
					&lt;ul&gt;
						&lt;li data-bind=&quot;click: function(){ extended_language_support(&#039;disable&#039;); }, css: { selected: extended_language_support() == &#039;disable&#039; }&quot;&gt;DISABLE&lt;/li&gt;
						&lt;li data-bind=&quot;click: function(){ extended_language_support(&#039;enable&#039;); }, css: { selected: extended_language_support() == &#039;enable&#039; }&quot;&gt;ENABLE&lt;/li&gt;
					&lt;/ul&gt;
					
				&lt;/div&gt;
				
			&lt;/div&gt;&lt;!--/.mb-options-list--&gt;
			
			&lt;!--&lt;a href=&quot;//fast.wistia.net/embed/iframe/bj9wbt88v4?popover=true&quot; class=&quot;wistia-popover[height=341,playerColor=7b796a,width=640]&quot;&gt;&lt;i class=&quot;fa fa-youtube-play&quot;&gt;&lt;/i&gt; &amp;nbsp;Visual Editor Introduction&lt;/a&gt;--&gt;
			
			&lt;button style=&quot;display:none;&quot; id=&quot;save-settings-button&quot; class=&quot;purple extra-padding&quot; data-bind=&quot;visible: !syncingDataWithServer(), click: saveSettings, enable: settings.dirty(), css: { disabled: !settings.dirty() || savingSettings() }&quot;&gt;
				&lt;span data-bind=&quot;visible: !savingSettings()&quot;&gt;Save Settings&lt;/span&gt;
				&lt;span data-bind=&quot;visible: savingSettings()&quot;&gt;&lt;i class=&quot;fa fa-spin fa-spinner&quot;&gt;&lt;/i&gt; &amp;nbsp;Saving...&lt;/span&gt;
			&lt;/button&gt;
			
			&lt;div style=&quot;float:left;margin-top:150px;position:relative;width:100%;&quot; class=&quot;option-element&quot; data-bind=&quot;with: $root&quot;&gt;
				&lt;span style=&quot;display:none;cursor:pointer;font-size:12px;border-bottom:1px dotted #AAA;color:#AAA;&quot; data-bind=&quot;visible: !deletingPlugin(), click: function(){ deletingPlugin(true); }&quot;&gt;Delete all plugin settings &amp; data&lt;/span&gt;
				&lt;div style=&quot;display:none;&quot; class=&quot;dark-color&quot; style=&quot;font-size:16px;padding:20px;position:relative;float:left;border-radius:3px;background:#EEE;border:1px solid #DDD;&quot; data-bind=&quot;visible: deletingPlugin()&quot;&gt;
					&lt;div&gt;&lt;p&gt;Are you sure you want to remove all plugin data and settings.&lt;/p&gt;
					&lt;p&gt;&lt;small&gt;Mango Buttons will also be deactivated following deletion.&lt;/small&gt;&lt;/p&gt;&lt;/div&gt;
					&lt;button style=&quot;position:relative;float:left;clear:both;margin-top:15px;&quot; data-bind=&quot;click: destroyPluginData&quot; class=&quot;red tiny&quot;&gt;DELETE&lt;/button&gt;
					&lt;button style=&quot;position:relative;float:left;clear:none;margin-top:15px;margin-left:20px;&quot; data-bind=&quot;visible: deletingPlugin(), click: function(){ deletingPlugin(false); }&quot; class=&quot;grey tiny&quot;&gt;CANCEL&lt;/button&gt;
					&lt;/div&gt;
			&lt;/div&gt;
			
			
			
		&lt;/div&gt;&lt;!--/.mb-main-content--&gt;
		
		&lt;div class=&quot;mb-sidebar-content&quot;&gt;
			&lt;h5&gt;Any Questions?&lt;/h5&gt;
			&lt;p&gt;Open a ticket on &lt;a href=&quot;https://mangobuttons.com/support&quot; target=&quot;_blank&quot;&gt;mangobuttons.com&lt;/a&gt;. We’re always happy to help you get set up and answer any questions you might have.&lt;/p&gt;
			&lt;a href=&quot;https://mangobuttons.com/support&quot; target=&quot;_blank&quot;&gt;&lt;button class=&quot;dark tiny extra-padding&quot;&gt;Open a ticket&lt;/button&gt;&lt;/a&gt;
			
			&lt;a href=&quot;https://mangobuttons.com/pricing&quot; target=&quot;_blank&quot;&gt;&lt;div class=&quot;mb-sidebar-ad ad1&quot;&gt;&lt;/div&gt;&lt;/a&gt;
		&lt;/div&gt;&lt;!--/.mb-sidebar-content--&gt;
		
	&lt;/div&gt;
&lt;/div&gt;</code></pre>        </div>
    </div>