{##
  # Copyright (C) 2016 Wimar Schippers
  #
  # This file is part of Shortcodes KNVB API.
  #
  # Shortcodes KNVB API is free software: you can redistribute it and/or modify
  # it under the terms of the GNU General Public License as published by
  # the Free Software Foundation, either version 2 of the License, or
  # any later version.
  #
  # Shortcodes KNVB API is distributed in the hope that it will be useful,
  # but WITHOUT ANY WARRANTY; without even the implied warranty of
  # MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
  # GNU General Public License for more details.
  #
  # You should have received a copy of the GNU General Public License
  # along with Shortcodes KNVB API. If not, see https://www.gnu.org/licenses/gpl-2.0.html.
  #}
<form action="options.php" method="post">
  {#
  ## Can't use php in twig template. In order to still being able to sent this form using the
  ## Wordpress settings API, we need to manually build the output of the settings_field() and
  ## the do_settings_section() functions
  #}
  <!-- settings_fields() | Wordpress sheize, replacing settings_fields() & do_settings_section() -->
  <input type='hidden' name='option_page' value='{{ option_group }}' />
  <input type="hidden" name="action" value="update" />
  <!-- wp_nonce_field() | Wordpress sheize, replacing settings_fields() & do_settings_section() -->
  <input type="hidden" id="_wpnonce" name="_wpnonce" value="{{ nonce }}" />
  <!-- wp_referer_field() | Wordpress sheize, replacing settings_fields() & do_settings_section() -->
  <input type="hidden" name="_wp_http_referer" value="{{ referer }}">
  <!-- Status info -->
  {% if not apiconnected %}
    <h2>Geen shortcodes!</h2>
    <p>
      Het lijkt erop dat u niet bent verbonden met de API. Er zijn daarom geen beschikbare shortcodes.
    </p>
  {% endif %}
  <!-- Settings table -->
  <table id="table-settings-settings" class="form-table">
    <!-- API status indicator -->
    <tr>
      <th>
        API Status
      </th>
      <td>
        {% if apistatus %}
          <div class="api-status" id="api-status-green"></div>
        {% else %}
          <div class="api-status" id="api-status-red"></div>
        {% endif %}
      </td>
    </tr>
    <!-- API connected indicator -->
    <tr>
      <th>
        Verbonden met API
      </th>
      <td>
        {% if apiconnected %}
          <div class="api-status" id="api-status-green"></div>
        {% else %}
          <div class="api-status" id="api-status-red"></div>
        {% endif %}
      </td>
    </tr>
    <!-- Clubname -->
    <tr>
      <th>
        Clubnaam
      </th>
      <td>
        <input type="text" name="shortcode_knvb_api_clubname" value="{% if clubname != '' %}{{ clubname }}{% else %}{{ apiclubname }}{% endif %}">
      </td>
    </tr>
    <!-- API key -->
    <tr>
      <th>
        API Sleutel
      </th>
      <td>
        <input type="text" name="shortcode_knvb_api_key" value="{{ apikey }}">
      </td>
    </tr>
    <!-- API path -->
    <tr>
      <th>
        API Path
      </th>
      <td>
        <input type="text" name="shortcode_knvb_api_path" value="{{ apipath }}">
      </td>
    </tr>
  </table>
  <!-- Submit button -->
  <p class="submit">
    <input type="submit" name="submit" id="submit" class="button button-primary" value="Opslaan" />
  </p>
</form>