<div class="handlediv" title="<%= __('Click to toggle') %>"><br></div>
<h3><%= __('Styles') %></h3>
<div class="mailpoet_region_content">
    <form id="mailpoet_newsletter_styles" action="" method="post" accept-charset="utf-8">
        <div id='mailpoet_brand_styles'></div>
        {{#if isWoocommerceTransactional}}
            <div class="mailpoet_form_field">
                <span>
                    <span><input type="text" class="mailpoet_color" size="6" maxlength="6" name="wc-branding-color" value="{{ model.woocommerce.brandingColor }}" id="mailpoet_wc_branding_color"></span>
                </span><%= __('Branding color') %>
            </div>
            <hr />
        {{/if}}
        <div class="mailpoet_form_field mailpoet_form_narrow_select2">
            <span>
                <span><input type="text" class="mailpoet_color" size="6" maxlength="6" name="text-color" value="{{ model.text.fontColor }}" id="mailpoet_text_font_color"></span>
            </span>
            <select id="mailpoet_text_font_family" name="text-family" class="mailpoet_font_family mailpoet_select mailpoet_select_medium">
            <optgroup label="<%= __('Standard fonts')%>">
            {{#each availableStyles.fonts.standard}}
                <option value="{{ this }}" {{#ifCond this '==' ../model.text.fontFamily}}SELECTED{{/ifCond}}>{{ this }}</option>
            {{/each}}
            </optgroup>
            {{#if availableStyles.fonts.custom.length}}
            <optgroup label="<%= __('Custom fonts')%>">
            {{#each availableStyles.fonts.custom}}
                <option value="{{ this }}" {{#ifCond this '==' ../model.text.fontFamily}}SELECTED{{/ifCond}}>{{ this }}</option>
            {{/each}}
            </optgroup>
            {{/if}}
            </select>
            <select id="mailpoet_text_font_size" name="text-size" class="mailpoet_font_size mailpoet_select mailpoet_select_small">
            {{#each availableStyles.textSizes}}
                <option value="{{ this }}" {{#ifCond this '==' ../model.text.fontSize}}SELECTED{{/ifCond}}>{{ this }}</option>
            {{/each}}
            </select> <%= __('Text') %>
        </div>
        {{#unless isWoocommerceTransactional}}
          <div class="mailpoet_form_field mailpoet_form_narrow_select2">
              <span>
                  <span><input type="text" class="mailpoet_color" size="6" maxlength="6" name="h1-color" value="{{ model.h1.fontColor }}" id="mailpoet_h1_font_color"></span>
              </span>
              <select id="mailpoet_h1_font_family" name="h1-family" class="mailpoet_font_family mailpoet_select mailpoet_select_medium">
              <optgroup label="<%= __('Standard fonts')%>">
              {{#each availableStyles.fonts.standard}}
                  <option value="{{ this }}" {{#ifCond this '==' ../model.h1.fontFamily}}SELECTED{{/ifCond}}>{{ this }}</option>
              {{/each}}
              </optgroup>
              {{#if availableStyles.fonts.custom.length}}
              <optgroup label="<%= __('Custom fonts')%>">
              {{#each availableStyles.fonts.custom}}
                  <option value="{{ this }}" {{#ifCond this '==' ../model.h1.fontFamily}}SELECTED{{/ifCond}}>{{ this }}</option>
              {{/each}}
              </optgroup>
              {{/if}}
              </select>
              <select id="mailpoet_h1_font_size" name="h1-size" class="mailpoet_font_size mailpoet_select mailpoet_select_small">
              {{#each availableStyles.headingSizes}}
                  <option value="{{ this }}" {{#ifCond this '==' ../model.h1.fontSize}}SELECTED{{/ifCond}}>{{ this }}</option>
              {{/each}}
              </select> <%= __('Heading 1') %>
          </div>
          <div class="mailpoet_form_field mailpoet_form_narrow_select2">
              <span>
                  <span><input type="text" class="mailpoet_color" size="6" maxlength="6" name="h2-color" value="{{ model.h2.fontColor }}" id="mailpoet_h2_font_color"></span>
              </span>
              <select id="mailpoet_h2_font_family" name="h2-family" class="mailpoet_font_family mailpoet_select mailpoet_select_medium">
              <optgroup label="<%= __('Standard fonts')%>">
              {{#each availableStyles.fonts.standard}}
                  <option value="{{ this }}" {{#ifCond this '==' ../model.h2.fontFamily}}SELECTED{{/ifCond}}>{{ this }}</option>
              {{/each}}
              </optgroup>
              {{#if availableStyles.fonts.custom.length}}
              <optgroup label="<%= __('Custom fonts')%>">
              {{#each availableStyles.fonts.custom}}
                  <option value="{{ this }}" {{#ifCond this '==' ../model.h2.fontFamily}}SELECTED{{/ifCond}}>{{ this }}</option>
              {{/each}}
              </optgroup>
              {{/if}}
              </select>
              <select id="mailpoet_h2_font_size" name="h2-size" class="mailpoet_font_size mailpoet_select mailpoet_select_small">
              {{#each availableStyles.headingSizes}}
                  <option value="{{ this }}" {{#ifCond this '==' ../model.h2.fontSize}}SELECTED{{/ifCond}}>{{ this }}</option>
              {{/each}}
              </select> <%= __('Heading 2') %>
          </div>
          <div class="mailpoet_form_field mailpoet_form_narrow_select2">
              <span>
                  <span><input type="text" class="mailpoet_color" size="6" maxlength="6" name="h3-color" value="{{ model.h3.fontColor }}" id="mailpoet_h3_font_color"></span>
              </span>
              <select id="mailpoet_h3_font_family" name="h3-family" class="mailpoet_font_family mailpoet_select mailpoet_select_medium">
              <optgroup label="<%= __('Standard fonts')%>">
              {{#each availableStyles.fonts.standard}}
                  <option value="{{ this }}" {{#ifCond this '==' ../model.h3.fontFamily}}SELECTED{{/ifCond}}>{{ this }}</option>
              {{/each}}
              </optgroup>
              {{#if availableStyles.fonts.custom.length}}
              <optgroup label="<%= __('Custom fonts')%>">
              {{#each availableStyles.fonts.custom}}
                  <option value="{{ this }}" {{#ifCond this '==' ../model.h3.fontFamily}}SELECTED{{/ifCond}}>{{ this }}</option>
              {{/each}}
              </optgroup>
              {{/if}}
              </select>
              <select id="mailpoet_h3_font_size" name="h3-size" class="mailpoet_font_size mailpoet_select mailpoet_select_small">
              {{#each availableStyles.headingSizes}}
                  <option value="{{ this }}" {{#ifCond this '==' ../model.h3.fontSize}}SELECTED{{/ifCond}}>{{ this }}</option>
              {{/each}}
              </select> <%= __('Heading 3') %>
          </div>
          <div class="mailpoet_form_field mailpoet_form_narrow_select2">
              <span>
                  <span><input type="text" class="mailpoet_color" size="6" maxlength="6" name="link-color" value="{{ model.link.fontColor }}" id="mailpoet_a_font_color"></span>
              </span><%= __('Links') %> <label><input type="checkbox" name="underline" value="underline" id="mailpoet_a_font_underline" {{#ifCond model.link.textDecoration '==' 'underline'}}CHECKED{{/ifCond}} class="mailpoet_option_offset_left_small"/> <%= __('Underline') %></label>
          </div>
          <hr />
          <div class="mailpoet_form_field">
              <label>
              <%= __('Text line height') %>
              <select id="mailpoet_text_line_height" name="text-line-height">
              {{#each availableStyles.lineHeights}}
                  <option value="{{ this }}" {{#ifCond this '==' ../model.text.lineHeight}}SELECTED{{/ifCond}}>{{ this }}</option>
              {{/each}}
              </select>
              </label>
          </div>
          <div class="mailpoet_form_field">
              <label>
              <%= __('Heading line height') %>
              <select id="mailpoet_heading_line_height" name="heading-line-height">
              {{#each availableStyles.lineHeights}}
                  {{!-- Checking against h1 only since all headings have the same line height value. --}}
                  <option value="{{ this }}" {{#ifCond this '==' ../model.h1.lineHeight}}SELECTED{{/ifCond}}>{{ this }}</option>
              {{/each}}
              </select>
              </label>
          </div>
        {{/unless}}
        <hr />
        <div class="mailpoet_form_field">
            <span>
                <span><input type="text" class="mailpoet_color" size="6" maxlength="6" name="newsletter-color" value="{{ model.wrapper.backgroundColor }}" id="mailpoet_newsletter_background_color"></span>
            </span><%= __('Content background') %>
        </div>
        <div class="mailpoet_form_field">
            <span>
                <span><input type="text" class="mailpoet_color" size="6" maxlength="6" name="background-color" value="{{ model.body.backgroundColor }}" id="mailpoet_background_color"></span>
            </span><%= __('Global background') %>
        </div>
    </form>
    <p class="mailpoet_settings_notice"><%= __('If an email client [link]does not support a custom web font[/link], a similar standard font will be used instead.')|replaceLinkTags('https://kb.mailpoet.com/article/176-which-fonts-can-be-used-in-mailpoet#custom-web-fonts', {'target' : '_blank', 'data-beacon-article': '586b882690336009736c1455'})|raw %></p>
</div>
<script type="text/javascript">
    fontsSelect('.mailpoet_font_family.mailpoet_select');
</script>