{% extends 'base.twig' %}

{% block main %}
<div class="village">

  <div class="village__top">
    <div>
      <span>
        <a href="/map/{{ village.x }}/{{ village.y }}">
          {{ village.x }} x {{ village.y }}
        </a>
      </span>
      &mdash;
      {{ village.name }}
    </div>

    <div class="resources">
      <div>
        <i class="icon icon-wood"></i>
        <span>{{ village.wood }} / {{ village.getStorage(village.id).getResourceCapacity('wood') }}</span>
        <i class="icon icon-per-increment"></i>
        <span>{{ village.getBuilding(village.id, 'WoodCutter').getResourceIncrementor() }}</span>
      </div>
      <div>
        <i class="icon icon-clay"></i>
        <span>{{ village.clay }} / {{ village.getStorage(village.id).getResourceCapacity('clay') }}</span>
        <i class="icon icon-per-increment"></i>
        <span>{{ village.getBuilding(village.id, 'ClayPit').getResourceIncrementor() }}</span>
      </div>
      <div>
        <i class="icon icon-iron"></i>
        <span>{{ village.iron }} / {{ village.getStorage(village.id).getResourceCapacity('iron') }}</span>
        <i class="icon icon-per-increment"></i>
        <span>{{ village.getBuilding(village.id, 'IronMine').getResourceIncrementor() }}</span>
      </div>
      <div>
        <i class="icon icon-food"></i>
        <span>{{ village.food }} / {{ village.getStorage(village.id).getResourceCapacity('food') }}</span>
        <i class="icon icon-per-increment"></i>
        <span>{{ village.getBuilding(village.id, 'Farm').getResourceIncrementor() }}</span>
      </div>

      <div onclick="javascript:this.nextElementSibling.showModal()">
        <i class="icon icon-storage"></i>
        <span>{{ village.getStorage(village.id).getCapacity() }}</span>
      </div>
      <dialog>
        <button onclick="javascript:this.parentNode.close()">Close</button>
        <h3 align="center">Storage Config</h3>
        <form method="post" action="/village/{{ village.x }}/{{ village.y }}/storage/config">
          <label>
            Wood:
            <input type="text" name="wood" value="{{ village.getStorageConfig(village.id).wood }}">
          </label>
          <label>
            <i class="icon icon-clay"></i>
            <input type="text" name="clay" value="{{ village.getStorageConfig(village.id).clay }}">
          </label>
          <label>
            <i class="icon icon-iron"></i>
            <input type="text" name="iron" value="{{ village.getStorageConfig(village.id).iron }}">
          </label>
          <label>
            <i class="icon icon-food"></i>
            <input type="text" name="food" value="{{ village.getStorageConfig(village.id).food }}">
          </label>
          <button>Save</button>
        </form>
      </dialog>
    </div>
  </div>

  <div class="village__events">
    <h3>Events</h3>

    {% if events['UpgradeBuilding'] %}
      <h4>Upgrade Buildings</h4>
      <table>
        <thead>
        <tr>
          <th>Building</th>
          <th>Time</th>
          <th></th>
        </tr>
        </thead>
        <tbody>
        {% for event in events['UpgradeBuilding'] %}
        <tr>
          <td>{{ event.data.building }}</td>
          <td class="timer">
          {% include 'components/timer.twig' with { 'time': event.event.time|date('c') } %}
          </td>
          <td>
            <a class="btn" href="/village/{{ village.x }}/{{ village.y }}/building/{{ event.data.building }}/build/cancel">
              Cancel
            </a>
          </td>
        </tr>
        {% endfor %}
        </tbody>
      </table>
    {% endif %}

    {% if events['TrainUnits'] %}
      <h4>Train Units</h4>
      <table>
        <thead>
        <tr>
          <th>Unit</th>
          <th>Time</th>
          <th></th>
        </tr>
        </thead>
        <tbody>
        {% for event in events['TrainUnits'] %}
        <tr>
          <td>{{ event.data.type }}</td>
          <td class="timer">
          {% include 'components/timer.twig' with { 'time': event.event.time|date('c') } %}
          </td>
          <td>
            <a class="btn" href="/village/{{ village.x }}/{{ village.y }}/unit/{{ event.data.type }}/train/cancel">
              Cancel
            </a>
          </td>
        </tr>
        {% endfor %}
        </tbody>
      </table>
    {% endif %}

    {% if events['SendUnits'] %}
      <h4>Send Resources / Units</h4>
      <table>
        <thead>
        <tr>
          <th>Type</th>
          <th>Unit</th>
          <th>Amount</th>
          <th>Origin</th>
          <th>Destination</th>
          <th>Time</th>
          <th></th>
        </tr>
        </thead>
        <tbody>
        {% for event in events['SendUnits'] %}
        <tr>
          <td>{{ event.data.type }}</td>
          <td>{{ event.data.unit }}</td>
          <td>{{ event.data.amount }}</td>
          <td>{{ village.get(event.data.source).name }}</td>
          <td>{{ village.get(event.data.destination).name }}</td>
          <td class="timer">
          {% include 'components/timer.twig' with { 'time': event.event.time|date('c') } %}
          </td>
          <td>
            <a class="btn" href="/village/{{ village.x }}/{{ village.y }}/unit/{{ event.data.type }}/train/cancel">
              Cancel
            </a>
          </td>
        </tr>
        {% endfor %}
        </tbody>
      </table>
    {% endif %}
  </div>

  <div class="village__main">
    <div class="village__buildings">
      <h3>Buildings</h3>
      <table>
        <thead>
        <tr>
          <th>Type</th>
          <th>Level</th>
          <th>Build Time</th>
          <th>Resources</th>
          <th></th>
        </tr>
        </thead>
        <tbody>
        {% for building in village.getBuildings(village.id) %}
        <tr class="village__buildings__row">
          <td>{{ building.type }}</td>
          <td>{{ building.level }}</td>
          <td>{{ building.getBuildTime() | buildTime }}</td>
          <td class="resources">
            <span>
              <i class="icon icon-wood"></i>
              {{ building.getResourceRequirements()['wood'] }}
            </span>
            &nbsp;
            <span>
              <i class="icon icon-clay"></i>
              {{ building.getResourceRequirements()['clay'] }}
            </span>
            &nbsp;
            <span>
              <i class="icon icon-iron"></i>
              {{ building.getResourceRequirements()['iron'] }}
            </span>
          </td>
          <td>
            <form action="/village/{{ village.x }}/{{ village.y }}/building/{{ building.type }}/level-up" method="post">
              <input type="submit" value="Level up" {{ village.canBuild(village, building) ? '' : 'disabled' }}>
            </form>
          </td>
        </tr>
        {% endfor %}
        </tbody>
      </table>
    </div>

    <div class="village_units">
      <h3>Units</h3>
      <table>
      <thead>
        <tr>
          <th>Type</th>
          <th>Amount</th>
          <th>Build Time</th>
          <th>Resources</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
      {% for unit in village.getUnits(village.id, 1) %}
        <tr>
          <td>{{ unit.type }}</td>
          <td>{{ unit.amount }}</td>
          <td>
            {{ unit.getBuildTime(1) | buildTime }}
          </td>
          <td>
            <span>
              <i class="icon icon-wood"></i>
              {{ unit.getResourceRequirements(unit, 1)['wood'] }}
            </span>
            &nbsp;
            <span>
              <i class="icon icon-clay"></i>
              {{ unit.getResourceRequirements(unit, 1)['clay'] }}
            </span>
            &nbsp;
            <span>
              <i class="icon icon-iron"></i>
              {{ unit.getResourceRequirements(unit, 1)['iron'] }}
            </span>
            &nbsp;
            <span>
              <i class="icon icon-food"></i>
              {{ unit.getResourceRequirements(unit, 1)['food'] ?? 0 }}
            </span>
          </td>
          <td>
            <form action="/village/{{ village.x }}/{{ village.y }}/unit/{{ unit.type }}/create" method="post" class="inline">
              <input type="number" min="0" name="amount" placeholder="Amount">
              <input type="submit" value="Train">
            </form>
          </td>
        </tr>
      {% endfor %}
      </tbody>
      </table>

      <h4>Supporting Units</h4>
      <table>
      <thead>
      <tr>
        <th>Type</th>
        <th>Amount</th>
        <th>Origin</th>
        <th>Location</th>
        <th>Travel Time</th>
        <th></th>
      </tr>
      </thead>
      <tbody>
      {% for unit in village.getUnits(village.id, 2) | merge(village.getUnits(village.id, 3)) %}
        <tr>
          <td>{{ unit.type }}</td>
          <td>{{ unit.amount }}</td>
          <td>{{ village.get(unit.homeVillageId).name }}</td>
          <td>{{ not unit.isTraveling ? village.get(unit.residenceVillageId).name : '~traveling~' }}</td>
          <td>{{ unit.getTravelTime(unit, village.getDistance(unit.getHomeVillage().x, unit.getHomeVillage().x, unit.getResidenceVillage().x, unit.getResidenceVillage().y)) | buildTime }}</td>
          <td>
          {% if not unit.isTraveling %}
            {% if unit.homeVillageId == village.id %}
              <form action="/village/{{ village.x }}/{{ village.y }}/unit/{{ unit.type }}/location/{{ unit.getResidenceVillage().x }}/{{ unit.getResidenceVillage().y }}/recall" method="post">
                <input type="number" min="1" max="{{ unit.amount }}" name="amount" placeholder="Amount" required>
                <input type="submit" value="Recall Home">
              </form>
            {% else %}
              <form action="/village/{{ village.x }}/{{ village.y }}/unit/{{ unit.type }}/location/{{ unit.getHomeVillage().x }}/{{ unit.getHomeVillage().y }}/send-back" method="post">
                <input type="number" min="1" max="{{ unit.amount }}" name="amount" placeholder="Amount" required>
                <input type="submit" value="Send Back">
              </form>
            {% endif %}
          {% endif %}
          </td>
        </tr>
      {% endfor %}
      </tbody>
      </table>

      <h4>Send Units</h4>
      <form action="/village/{{ village.x }}/{{ village.y }}/send-units" method="post">
        <select name="unit">
          {% for unit in village.getUnits(village.id, 1) %}
            <option>{{ unit.type }}</option>
          {% endfor %}
        </select>
        <select name="village">
          {% for v in villages %}
            <option value="{{ v.id }}">{{ v.name }}</option>
          {% endfor %}
        </select>
        <input type="number" min="1" name="amount" placeholder="Amount" required>
        <button>Send</button>
      </form>
    </div>
  </div>
</div>
{% endblock %}