<div class="wrap">
  <h3>Customizer Product Page Layout</h3>
  <p>This section contains settings regarding the customizer layout inside the product page.</p>
  <hr>

  <form name="form" method="post">
    <input type="hidden" id="section" name="section" readonly="readonly" value="layout">
    <fieldset>
      <table class="form-table">
        <tbody>
          <tr>
            <th><label for="form_displayMode">Display mode</label></th>
            <td>
              <select id="form_displayMode" name="displayMode">
                <option value="customizer_only" {% if form.displayMode == 'customizer_only' or not form.displayMode %}selected{% endif %}>Customizer only (embed the customizer directly in the page)</option>
                <option value="customize_button" {% if form.displayMode == 'customize_button' %}selected{% endif %}>Customize button (show a button that opens the customizer in a modal)</option>
              </select>
            </td>
          </tr>
          <tr class="mczr-field-customizer-only">
            <th><label for="form_iframeWidth">Customizer Iframe width</label></th>
            <td><input type="text" id="form_iframeWidth" name="iframeWidth" value="{{ form.iframeWidth }}"></td>
          </tr>
          <tr class="mczr-field-customizer-only">
            <th><label for="form_iframeHeight">Customizer Iframe height</label></th>
            <td><input type="text" id="form_iframeHeight" name="iframeHeight" value="{{ form.iframeHeight }}"></td>
          </tr>

          <tr class="mczr-field-customizer-only">
            <th><label for="form_iframeHook">Customizer Iframe hook <a href="https://help.mycustomizer.com/en/articles/5607869-woocommerce-setting-the-customizer-iframe-location" target="_blank">?</a></label></th>
            <td>
              <input type="text" id="form_iframeHook" name="iframeHook" placeholder="{{ form.defaultIframeHook }}" value="{{ form.iframeHook }}">
              <br>
              <small>Change this value if your customizer does not show up</small>
            </td>
          </tr>

          <tr class="mczr-field-customize-button">
            <th><label for="form_customizeButtonHook">Customize button hook</label></th>
            <td>
              <input type="text" id="form_customizeButtonHook" name="customizeButtonHook" placeholder="{{ form.defaultCustomizeButtonHook }}" value="{{ form.customizeButtonHook }}">
              <br>
              <small>Hook where the Customize button is rendered on the product page</small>
            </td>
          </tr>

          <tr>
            <th><label for="form_iframeHookPriority">Hook priority</label></th>
            <td>
              <input type="text" id="form_iframeHookPriority" name="iframeHookPriority" placeholder="0" value="{{ form.iframeHookPriority }}">
              <br>
              <small>Priority for the active hook above (Iframe hook in Customizer only mode, Customize button hook in Customize button mode)</small>
            </td>
          </tr>

          <tr class="mczr-field-customizer-only">
            <th><label for="form_productCss">Customizer Product Page extra CSS</label></th>
            <td>
              <textarea id="form_productCss" name="productCss" rows="4" cols="40">{{ form.productCss }}</textarea>
              <br>
              <small>Custom CSS added on the customizer product page, i.e.: iframe#mczrMainIframe { height: 90vh; }</small>
            </td>
          </tr>
          <tr class="mczr-field-customize-button">
            <th><label for="form_customizeButtonCss">Customize button modal extra CSS</label></th>
            <td>
              <textarea id="form_customizeButtonCss" name="customizeButtonCss" rows="4" cols="40">{{ form.customizeButtonCss }}</textarea>
              <br>
              <small>Custom CSS added inside the modal only, i.e.: #mczrCustomizerModalInner { max-width: 1200px; }</small>
            </td>
          </tr>
          <tr>
            <th></th>
            <td><button type="submit" id="form_submit" name="submit" class="button button-primary">Submit</button></td>
          </tr>
        </tbody>
      </table>
    </fieldset>

    <fieldset>
      {{ form.token | raw }}
    </fieldset>
  </form>
</div>

