<h3 data-automation-id="coupon_settings_heading"><%= __('Coupon') %></h3>

<div id="mailpoet_coupon_block_settings" class="mailpoet_coupon_block_settings"></div>

<div class="mailpoet_coupon_block_display_options mailpoet_closed">
  <div class="mailpoet_form_field">
    <div class="mailpoet_form_field_title"><%= __('Alignment') %></div>
    <div class="mailpoet_form_field_radio_option">
      <label>
        <input type="radio" name="alignment" class="mailpoet_field_coupon_alignment" value="left" {{#ifCond model.styles.block.textAlign '===' 'left'}}CHECKED{{/ifCond}}/>
        <%= __('Left') %>
      </label>
    </div>
    <div class="mailpoet_form_field_radio_option">
      <label>
        <input type="radio" name="alignment" class="mailpoet_field_coupon_alignment" value="center" {{#ifCond model.styles.block.textAlign '===' 'center'}}CHECKED{{/ifCond}}/>
        <%= __('Center') %>
      </label>
    </div>
    <div class="mailpoet_form_field_radio_option">
      <label>
        <input type="radio" name="alignment" class="mailpoet_field_coupon_alignment" value="right" {{#ifCond model.styles.block.textAlign '===' 'right'}}CHECKED{{/ifCond}}/>
        <%= __('Right') %>
      </label>
    </div>
  </div>
  <div class="mailpoet_form_field mailpoet_form_narrow_select2">
    <div class="mailpoet_form_field_title"><%= __('Text') %></div>
    <div class="mailpoet_form_field_input_option mailpoet_form_field_input_nowrap">
      <input type="text" name="font-color" id="mailpoet_field_coupon_font_color" class="mailpoet_field_coupon_font_color mailpoet_color" value="{{ model.styles.block.fontColor }}" />
      <select id="mailpoet_field_coupon_font_family" name="font-family" class="mailpoet_select mailpoet_select_medium mailpoet_field_coupon_font_family mailpoet_font_family">
        <optgroup label="<%= __('Standard fonts')%>">
          {{#each availableStyles.fonts.standard}}
            <option value="{{ this }}" {{#ifCond this '==' ../model.styles.block.fontFamily}}SELECTED{{/ifCond}}>{{ this }}</option>
          {{/each}}
        </optgroup>
        <optgroup label="<%= __('Custom fonts')%>">
          {{#each availableStyles.fonts.custom}}
            <option value="{{ this }}" {{#ifCond this '==' ../model.styles.block.fontFamily}}SELECTED{{/ifCond}}>{{ this }}</option>
          {{/each}}
        </optgroup>
      </select>
      <select id="mailpoet_field_coupon_font_size" name="font-size" class="mailpoet_select mailpoet_select_small mailpoet_field_coupon_font_size mailpoet_font_size">
        {{#each availableStyles.headingSizes}}
          <option value="{{ this }}" {{#ifCond this '==' ../model.styles.block.fontSize}}SELECTED{{/ifCond}}>{{ this }}</option>
        {{/each}}
      </select>
    </div>
  </div>
  <div class="mailpoet_form_field">
    <div class="mailpoet_form_field_checkbox_option">
      <label>
        <input type="checkbox" name="fontWeight" class="mailpoet_field_coupon_font_weight" value="bold" {{#ifCond model.styles.block.fontWeight '===' 'bold'}}CHECKED{{/ifCond}}/>
        <%= __('Bold') %>
      </label>
    </div>
  </div>
  <div class="mailpoet_form_field">
    <div class="mailpoet_form_field_input_option">
      <input type="text" name="background-color" class="mailpoet_field_coupon_background_color mailpoet_color" value="{{ model.styles.block.backgroundColor }}" />
    </div>
    <div class="mailpoet_form_field_title mailpoet_form_field_title_inline"><%= __('Background') %></div>
  </div>
  <div class="mailpoet_form_field">
    <div class="mailpoet_form_field_input_option">
      <input type="text" name="border-color" class="mailpoet_field_coupon_border_color mailpoet_color" value="{{ model.styles.block.borderColor }}" />
    </div>
    <div class="mailpoet_form_field_title mailpoet_form_field_title_inline"><%= __('Border') %></div>
    <div class="mailpoet_form_field_input_option">
      <input type="number" name="border-width-input" class="mailpoet_input mailpoet_input_small mailpoet_field_coupon_border_width_input" value="{{getNumber model.styles.block.borderWidth}}" min="0" max="10" step="1" /> px
      <input type="range" min="0" max="10" step="1" name="border-width" class="mailpoet_range mailpoet_range_small mailpoet_field_coupon_border_width" value="{{getNumber model.styles.block.borderWidth}}" />
    </div>
  </div>
  <div class="mailpoet_form_field">
    <label>
      <div class="mailpoet_form_field_title"><%= __('Rounded corners') %></div>
      <div class="mailpoet_form_field_input_option">
        <input type="number" name="border-radius-input" class="mailpoet_input mailpoet_input_small mailpoet_field_coupon_border_radius_input" value="{{getNumber model.styles.block.borderRadius}}" min="0" max="40" step="1" /> px
        <input type="range" min="0" max="40" step="1" name="border-radius" class="mailpoet_range mailpoet_range_medium mailpoet_field_coupon_border_radius" value="{{getNumber model.styles.block.borderRadius }}" />
      </div>
    </label>
  </div>
  <div class="mailpoet_form_field">
    <label>
      <div class="mailpoet_form_field_title"><%= __('Width') %></div>
      <div class="mailpoet_form_field_input_option">
        <input type="number" name="width-input" class="mailpoet_input mailpoet_input_small mailpoet_field_coupon_width_input" value="{{getNumber model.styles.block.width}}" min="50" max="288" step="1" /> px
        <input type="range" min="50" max="288" step="1" name="width" class="mailpoet_range mailpoet_range_medium mailpoet_field_coupon_width" value="{{getNumber model.styles.block.width }}" />
      </div>
    </label>
  </div>
  <div class="mailpoet_form_field">
    <label>
      <div class="mailpoet_form_field_title"><%= __('Height') %></div>
      <div class="mailpoet_form_field_input_option">
        <input type="number" name="line-height-input" class="mailpoet_input mailpoet_input_small mailpoet_field_coupon_line_height_input" value="{{getNumber model.styles.block.lineHeight}}" min="20" max="50" step="1" /> px
        <input type="range" min="20" max="50" step="1" name="line-height" class="mailpoet_range mailpoet_range_medium mailpoet_field_coupon_line_height" value="{{getNumber model.styles.block.lineHeight }}" />
      </div>
    </label>
  </div>
  {{#ifCond renderOptions.hideApplyToAll '!==' true}}
  <div class="mailpoet_form_field">
    <input type="button" name="replace-all-coupon-styles" class="button button-secondary mailpoet_coupon_full mailpoet_field_coupon_replace_all_styles" value="<%= __('Apply styles to all coupons') | escape('html_attr') %>" />
  </div>
  {{/ifCond}}
</div>

<div class="mailpoet_form_field">
    <a href="javascript:;" class="mailpoet_settings_coupon_show_coupon_configuration mailpoet_hidden"><%= __('Back to selection') %></a>
    <a href="javascript:;" class="mailpoet_settings_coupon_show_display_options"><%= __('Display options') %></a>
</div>

<div class="mailpoet_form_field">
    <input type="button" class="button button-primary mailpoet_done_editing" data-automation-id="coupon_done_button" value="<%= __('Done') | escape('html_attr') %>" />
</div>

<script type="text/javascript">
    fontsSelect('#mailpoet_field_coupon_font_family');
</script>