<h3><%= __('Image') %><span id="tooltip-designer-ideal-width" class="tooltip-help-designer-ideal-width"></span></h3>
<div class="mailpoet_form_field">
    <label>
        <div class="mailpoet_form_field_title"><%= __('Link') %> <span class="mailpoet_form_field_optional">(<%= __('Optional') %>)</div>
        <div class="mailpoet_form_field_input_option">
            <input type="text" name="src" class="mailpoet_input mailpoet_field_image_link" value="{{ model.link }}" placeholder="http://" />
        </div>
    </label>
</div>
<div class="mailpoet_form_field">
    <label>
        <div class="mailpoet_form_field_title"><%= _x('Image address', 'input field for the image URL') %></div>
        <div class="mailpoet_form_field_input_option">
            <input type="text" name="src" class="mailpoet_input mailpoet_field_image_address" value="{{ model.src }}" placeholder="http://" /><br />
        </div>
    </label>
</div>
<div class="mailpoet_form_field">
    <input type="button" name="select-image" class="button button-secondary mailpoet_button_full mailpoet_field_image_select_image" value="<%= __('Select another image') | escape('html_attr') %>" />
</div>

<div class="mailpoet_form_field">
    <label>
        <div class="mailpoet_form_field_title"><%= __('Alternative text') %></div>
        <div class="mailpoet_form_field_input_option">
            <input type="text" name="alt" class="mailpoet_input mailpoet_field_image_alt_text" value="{{ model.alt }}" />
        </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
                class="mailpoet_input mailpoet_input_small mailpoet_field_image_width_input"
                name="image-width-input"
                type="number"
                value="{{getNumber model.width}}"
                min="36"
                max="660"
                step="2"
            /> px
            <input
                class="mailpoet_range mailpoet_range_small mailpoet_field_image_width"
                name="image-width"
                type="range"
                value="{{getNumber model.width}}"
                min="36"
                max="660"
                step="2"
            />
        </div>
    </label>
</div>
<div class="mailpoet_form_field">
    <div class="mailpoet_form_field_checkbox_option">
        <label>
            <input type="checkbox" name="fullWidth" class="mailpoet_field_image_full_width" value="true" {{#if model.fullWidth }}CHECKED{{/if}}/>
            <%= _x('No padding', 'Option to remove a default padding around images') %>
        </label>
        <span id="tooltip-designer-full-width" class="tooltip-help-designer-full-width"></span>
    </div>
</div>
<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_image_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_image_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_image_alignment" value="right" {{#ifCond model.styles.block.textAlign '===' 'right'}}CHECKED{{/ifCond}}/>
            <%= __('Right') %>
        </label>
    </div>
</div>

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