{% extends "base.html" %}

{% block title %}{{ application_name }} Development Console - Datastore Viewer - {% if key %}Edit Entity{% else %}New Entity{% endif %}{% endblock %}

{% block head %}
  <style type="text/css">{% include "css/form.css" %}</style>
  <style type="text/css">

  .field_type {
    color: gray;
    font-weight: normal;
  }

  </style>
  <script type="text/javascript">

  function load() {
    var elements = document.getElementsByTagName("input");
    for (var i = 0; i < elements.length; i++) {
      var element = elements[i];
      var hint = null;
      if (element.className == "time") {
        hint = "e.g., 2006-30-05 23:56:04";
      }
      if (hint) registerHint(element, hint);
    }
  }

  function registerHint(element, hint) {
    function showDefault() {
      if (element.value.length == 0 || element.value == hint) {
        element.style.color = "gray";
        element.value = hint;
      }
    }
    function clearDefault() {
      if (element.style.color == "gray" || element.value == hint) {
        element.value = "";
        element.style.color = "black";
      }
    }
    element.onblur = showDefault;
    element.onfocus = clearDefault;
    showDefault();
  }

  function clearHints(form) {
    var elements = form.getElementsByTagName("input");
    for (var i = 0; i < elements.length; i++) {
      var element = elements[i];
      if (element.type == "text" && element.style.color == "gray") {
        element.onblur = null;
        element.onfocus = null;
        element.value = "";
      }
    }
    return true;
  }

  </script>
{% endblock %}

{% block bodyattributes %}onload="load()"{% endblock %}

{% block body %}
  <h3>{% if key %}Edit Entity{% else %}New Entity{% endif %}</h3>

  <form action="{{ request.path }}" method="post" onsubmit="return clearHints(this)">
    <div><input type="hidden" name="next" value="{{ next }}"/></div>
    <table class="form">
      <tr>
        <td class="name">Entity Kind</td>
        <td class="value text">
          {{ kind }}
          <input type="hidden" name="kind" value="{{ kind }}"/>
        </td>
      </tr>
      {% if key %}
        <tr>
          <td class="name">Entity Key</td>
          <td class="value text">
            {{ key }}
            <input type="hidden" name="key" value="{{ key }}"/>
          </td>
        </tr>
      {% endif %}
      {% if key_name %}
        <tr>
          <td class="name">Key Name</td>
          <td class="value text">
            {{ key_name }}
          </td>
        </tr>
      {% endif %}
      {% if key_id %}
        <tr>
          <td class="name">ID</td>
          <td class="value text">
            {{ key_id }}
          </td>
        </tr>
      {% endif %}
      {% if parent_key %}
        <tr>
          <td class="name">Parent</td>
          <td class="value text">
            <a href="?key={{parent_key}}&kind={{parent_kind}}">{{ parent_key }}</a>
          </td>
        </tr>
      {% endif %}
      {% for field in fields %}
        <tr>
          <td class="name">
            <span class="field_name">{{ field.0|escape }}</span>
            <span class="field_type">({{ field.1|escape }})</span>
          </td>
          <td class="value"><div style="position: relative">{{ field.2|safe }}</div></td>
        </tr>
      {% endfor %}
      <tr>
        <td></td>
        <td class="buttons">
          <input type="submit" value="Save Changes"/>
          {% if key %}
            <input type="submit" name="action" value="Delete" onclick="return confirm('Are you sure you want to permanently delete this entity?');"/>
          {% endif %}
        </td>
      </tr>
    </table>
  </form>

  <div id="datepicker"></div>
{% endblock %}

{% block final %}
<script type="text/javascript">
//<![CDATA[

// Sets the focus on the field with the given name in the given array (if any)
function setFocus(fields, fieldName) {
  for (var i = 0; i < fields.length; i++) {
    var field = fields[i];
    var name = field.name;
    if (field.focus && name.length > focus.length &&
        name.substring(name.length - focus.length - 1) == '|' + focus) {
      field.focus();
      break;
    }
  }
}

// Focus on the appropriate field in the form based on the "focus" argument
// in the URL
var focus = "{{ focus|addslashes }}";
if (focus) {
  setFocus(document.getElementsByTagName("input"), focus);
  setFocus(document.getElementsByTagName("textarea"), focus);
}

//]]>
</script>
{% endblock %}