{% extends 'trosnoth/base.html' %}
{% load static %}
{% block head %}
  <title>{{ settings.serverName }} :: Select Scenario</title>
{% endblock %}

{% block main %}
  <div id="container">
    <h1><a href="/">{{ settings.serverName }}</a></h1>
    <h2>Select scenario</h2>
    {% if not loneArena %}
      <p class="form_note">This scenario will be run in arena "{{ arena.name }}".</p>
    {% endif %}

    <form method="post">
      {% csrf_token %}
      <table>{{ form.as_table }}</table>
      <div class="submit-row">
        <input type="submit" class="default" value="Start scenario">
        <input type="submit" value="Cancel" name="cancel">
      </div>
    </form>
  </div>
  <script>
    function update_fields() {
      var size_field = document.getElementById('id_size');
      var size = size_field.value;
      var half_width_field = document.getElementById('id_half_width');
      var height_field = document.getElementById('id_height');

      if (size == 'custom') {
        half_width_field.disabled = 0;
        height_field.disabled = 0;
      } else {
        var half_width, height;
        if (size == 'small') {
          halfWidth = 1;
          height = 1;
        } else if (size == 'wide') {
          halfWidth = 5;
          height = 1;
        } else if (size == 'large') {
          halfWidth = 5;
          height = 3;
        } else {
          halfWidth = 3;
          height = 2;
        }
        half_width_field.disabled = 1;
        half_width_field.value = halfWidth;
        height_field.disabled = 1;
        height_field.value = height;
      }

      var level = document.getElementById('id_scenario').value;
      var teams_field = document.getElementById('id_teams');

      constrained = {
        catpigeon: 1,
        freeforall: 1,
        hunted: 1,
        orbchase: 1,
        elephantking: 1,
      }
      if (constrained[level]) {
        teams_field.disabled = 1;
        size_field.disabled = 1;
      } else {
        teams_field.disabled = 0;
        size_field.disabled = 0;
      }
    }
    window.onload = update_fields;
  </script>
{% endblock %}