<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_iframeWidth">Customizer Iframe width</label></th>
            <td><input type="text" id="form_iframeWidth" name="iframeWidth" value="{{ form.iframeWidth }}"></td>
          </tr>
          <tr>
            <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>
            <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" required="required" placeholder="woocommerce_after_single_product_summary" value="{{ form.iframeHook }}">
              <br>
              <small>Change this value if your customizer does not show up</small>
            </td>
          </tr>
          <tr>
            <th><label for="form_iframeHookPriority">Customizer Iframe hook priority</label></th>
            <td>
              <input type="text" id="form_iframeHookPriority" name="iframeHookPriority" required="required" placeholder="0" value="{{ form.iframeHookPriority }}">
              <br>
              <small>Change this value to move your customizer before or after the hook</small>
            </td>
          </tr>
          <tr>
            <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>
            <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>
