{% load i18n %}
<style type="text/css">
#djDebugHostPanel form,
#djDebugHostPanel #clear_host
{
  margin-top: 2em;
}
#djDebugHostPanel label
{
  display: block;
}
#djDebugHostPanel input,
#djDebugHostPanel form button
{
  font-size: 150%;
  margin-top: 10px;
}
</style>

<script language="javascript">
  var navigate_to_host = function(host) {
    var exdate = new Date();
    exdate.setDate(exdate.getDate() + 365);

    document.cookie = "_host=" + escape(host) + "; expires=" + exdate.toUTCString() + "; path=/";

    window.location.reload();
  };

  $('#djDebugHostPanel #clear_host').live('click', function () {
    navigate_to_host('');
    return false;
  });

  $('form[name=navigate_to_host]').live('submit', function () {
    navigate_to_host($('#host_enter').val());
    return false;
  });
</script>

<form name="navigate_to_host">
  <label for="host_enter">{% trans "Host to navigate to (eg. api.example.com):" %}</label>
  <input id="host_enter" value="{{ host }}">
  <button type="submit">{% trans "Navigate" %}</button>
</form>

<button id="clear_host">{% trans "Clear host" %}</button>
