{% extends "base_query_page.html" %}

{% block pagetitle %}Manage Query{% endblock %}
{% block bodytitle %}Manage Query{% endblock %}

{% block head %}
  <script src="{{ LINKS.js }}helpers.js"></script>
{% endblock %}

{% block api_query_content %}
  <div class="admin_container">
    <div class="container_heading">
      <h2>Public Request Endpoint</h2>
    </div>
      <p class="tagline">Details about the configuration and the public URL for
        this query.</p>
      <table class="query_table">
        <tr>
          <td class="row_label">Status</td>
          <td class="manage_status" id="{{ query_status_id }}">
            {{ query_status }}</td>
        </tr>
        {% if is_admin %}
        <tr>
          <td class="row_label">Owner</td>
          <td>{{ api_query.user_email }}</td>
        </tr>
        {% endif %}
      </table>
    <form method="post" id="query_form" onsubmit="return validateForm(this)"
          action="{{ api_query.edit_post_link }}">
      <label class="edit-label" for="name">Query Name</label>
      <input type="text" id="name" name="name"
             value="{{ api_query.name }}"
             placeholder="e.g. Site pageviews (example.com)"/> &nbsp;
      <span class="validate-text" id="name_msg"></span><br/>

      <label class="edit-label"
             for="refresh_interval">Refresh Interval (seconds)</label>
      <input type="text" id="refresh_interval" name="refresh_interval"
             value="{{ api_query.refresh_interval }}"/> &nbsp;
      <span class="validate-text" id="refresh_interval_msg"></span>
      <span class="tip-text">(1 hour = 3600, 1 day = 86400)</span><br/>

      <label class="edit-label" for="request">
        API Request</label>
      <textarea id="request"
                name="request">{{ api_query.request }}</textarea><br/>

      <div id="date_params" class="tip-text edit">
        <span class="validate-text" id="request_msg"></span><br/>
        Supported date parameters are <strong>{today}</strong> and
        <strong>{Ndaysago}</strong>.<br/>
        Relative dates are resolved to actual dates during query execution
        and are currently configured to use the
        <strong>{{ timezone|capitalize }}</strong> timezone.<br/><br/>
        E.g. A query for the last 7 days would use the following
        start and end dates: <br/>
        https://www.googleapis.com/analytics/v3/data/ga?ids=ga%3A12345&start-date={7daysago}&end-date={today}
        <div class="warning">
          <strong>Warning</strong>: Changing the the API Request URL may cause
          you to break clients that are expecting a stable API Response for
          this public endpoint.
        </div>
      </div>

      <p class="explorer_tip_edit"><strong>Tip:</strong> Use the
        <a target="_blank" href="//ga-dev-tools.appspot.com/explorer/">
          Google Analytics Query Explorer</a> to build a valid Query URI.
      </p>
      <input type="submit" class="button button-red save-button"
             name="save_query" id="save_query" value="Save Query"/>
      <input type="submit" class="button button-red save-run-button"
             name="save_query_refresh" id="save_query_refresh"
             value="Save & Refresh Now"/>
      <input type="submit" class="button button-gray test-button"
             name="test_query" id="test_query" value="Test Query"/>
      <input type="hidden" name="xsrf_token" value="{{ xsrf_token }}"/>
      <a class="cancel"
         href="{{ api_query.manage_link }}">
         Cancel</a>
    </form>

    {% if test_response %}
      <h4>Test Response Content</h4>
      <div class="response_container test_response_container">
        {{ test_response }}
      </div>
    {% endif %}
  </div>

{% endblock %}