<div class="wrap">
  <h3>Diagnostic</h3>
  <p>This section contains a diagnostic tool to check your online store's Kickflip configuration.</p>
  <form name="form" method="post">
    <input type="hidden" id="section" name="section" readonly="readonly" value="diagnostic">
    <table class="form-table">
      <tbody>
        <tr>
          <th><label>Tests to run</label></th>
          <td>
            <fieldset>
              <small>Select which diagnostic tests to execute.</small>
              <br>
              <label>
                <input type="checkbox" name="options[]" value="settings" {{ (form.diagnosticOptions is empty or 'settings' in form.diagnosticOptions) ? 'checked' }}>
                Validate Kickflip settings
              </label>
              <br>
              <label>
                <input type="checkbox" name="options[]" value="connectionTo" {{ (form.diagnosticOptions is empty or 'connectionTo' in form.diagnosticOptions) ? 'checked' }}>
                Test connectivity to Kickflip API
              </label>
              <br>
              <label>
                <input type="checkbox" name="options[]" value="onlineStore" {{ (form.diagnosticOptions is empty or 'onlineStore' in form.diagnosticOptions) ? 'checked' }}>
                Fetch online store configuration
              </label>
              <br>
              <label>
                <input type="checkbox" name="options[]" value="connectionFrom" {{ (form.diagnosticOptions is empty or 'connectionFrom' in form.diagnosticOptions) ? 'checked' }}>
                Test connectivity from Kickflip API
              </label>
              <br>
              <label>
                <input type="checkbox" name="options[]" value="orders" {{ (form.diagnosticOptions is empty or 'orders' in form.diagnosticOptions) ? 'checked' }}>
                Scan recent orders for missing metadata
              </label>
            </fieldset>
          </td>
        </tr>
        <tr>
          <th><label>Order date range</label></th>
          <td>
            <small>Select the date range for orders to scan for missing metadata.</small>
            <br>
            <label for="orderStartDate">From:</label>
            <input type="date" id="orderStartDate" name="options[orderStartDate]" value="{{ form.diagnosticOptions.orderStartDate ?? "now"|date_modify("-30 days")|date("Y-m-d") }}">
            &nbsp;&nbsp;&nbsp;
            <label for="orderEndDate">To:</label>
            <input type="date" id="orderEndDate" name="options[orderEndDate]" value="{{ form.diagnosticOptions.orderEndDate ?? "now"|date("Y-m-d") }}">
          </td>
        </tr>
      </tbody>
    </table>

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

    <button id="diagnostic-button" class="button button-primary">Launch Diagnostic</button>
  </form>
</div>
