<!DOCTYPE html>
<html>
  <head>
{% if not done and current_player.uuid != me.uuid %}
    <meta http-equiv="refresh" content="3" />
{% endif %}
    <style>
      body > svg {
	  min-width: 50%;
	  max-width: 100%;
	  max-height: 70vh;
	  display: block;
      }
      
      svg .highlight {
	  stroke: black;
	  stroke-width: 1px;
	  fill: none;
      }
      
      svg .claimable:hover {
	  stroke: cyan;
	  stroke-width: 3px;
      }
      svg .claimable.hover {
	  stroke: cyan;
	  stroke-width: 3px;
      }

      svg .empty {
	  fill: transparent;
	  stroke: grey;
	  stroke-width: 1px;
      }

      svg .plus {
      fill: grey;
      }

      svg .defense {
	  fill: blue;
	  stroke-width: 3px;
	  stroke: white;
	  pointer-events: none;
      }

      svg .road {
	  fill: olive;
      }

      svg .city {
	  fill: brown;
      }

      svg .citywall {
	  stroke: #000000;
	  stroke-width: 5px;
	  fill: none;
      }

      svg .pasture {
	  fill: green;
      }
      {% for p in completed_pastures %}
      svg .pasture[data-uuid="{{ p }}"] {
          fill: #{{ p.__str__()[:6] }};
      }
      {% endfor %}

      svg .monastery {
        fill: #713c32;
      }

      svg .cathedral {
          fill: #713c32;
	  pointer-events: none;
      }

      svg .inn {
          fill: white;
	  pointer-events: none;
      }

      svg .shrine-clickable {
          fill: green;
      }
      svg .shrine {
          fill: #713c32;
	  pointer-events: none;
      }
      svg .shrine-overlay {
          fill: #713c32;
	  pointer-events: none;
      }

      svg .river {
	  fill: #86b4bc;
      }

      svg .bridgeshadow {
	  fill: #00000066;
	  pointer-events: none;
      }

      input[type="number"], input[value="Place Tile"], input[type="radio"], select {
	  display: none;
      }
      input[name="follower"]:checked + label.follower-label .follower {
	  stroke-width: 3px;
	  stroke: black;	  
      }

      svg [droppable="true"]
    </style>
  </head>
  <body>
    {{ field }}
    {% if done %}
    Game Over! <a href="{{ baseurl }}/{{ me.uuid }}">Return to lobby</a>
    {% else %}
    {% if current_player.uuid == me.uuid %}
    It is your turn!
    {% if phase == 'place' %}Place your tile{% else %}Claim your resource{% endif %}
    <form name="controls" method="POST">
      {% if phase == 'place' %}
      <input type="submit" value="Rotate CCW" name="action" />
      {{ card }}
      <input type="submit" value="Rotate CW" name="action" />
      <input type="number" value="0" name="x" />
      <input type="number" value="0" name="y" />
      <input type="submit" value="Place Tile" name="action" id="btn-place" />
      {% endif %}
      {% if phase == 'claim' %}
      {% for follower in me.followers %}
      {{ follower.resting_svg() }}
      {% endfor %}
      <select name="claim">
	{{ claimable }}
      </select>
      <input type="submit" value="Claim" name="action" id="btn-claim" />
      {% endif %}
    </form>
    <script>
      let c = document.forms.controls;
      let empties = document.getElementsByClassName('empty');
      for (let i = 0; i < empties.length; ++i) {
	empties[i].onclick = (e) => {
          c.elements.x.value = e.target.getAttribute('data-x');
          c.elements.y.value = e.target.getAttribute('data-y');
          document.getElementById('btn-place').click();
	};
      };
      let claimables = document.getElementsByClassName('claimable');
      for (let i = 0; i < claimables.length; ++i) {
        claimables[i].setAttribute('droppable', true);
        claimables[i].onclick = (e) => {
          c.elements.claim.value = e.target.getAttribute('data-uuid');
          document.getElementById('btn-claim').click();
        };
      };
      follower = null;
      document.addEventListener('dragstart', e => {
        follower = e.target;
        follower.style.opacity = 0.5;
        e.dataTransfer.effectAllowed = 'move';
      });
      document.addEventListener('dragenter', e => {
        e.target.classList.add('hover');
        e.dataTransfer.dropEffect = 'move';
      });
      document.addEventListener('dragleave', e => {
        e.target.classList.remove('hover');
      });
      document.addEventListener('dragend', e => {
        follower.style.opacity = '';
      });
      document.addEventListener('dragover', e => {
        e.preventDefault();
      });
      document.addEventListener('drop', e => {
        follower.style.opacity = '';
        if (!e.target.hasAttribute('data-uuid')) {
          return;
        }
        c.elements.follower.value = follower.getAttribute('data-uuid');
        c.elements.claim.value = e.target.getAttribute('data-uuid');
        console.log(c.elements.follower.value + ' ' + c.elements.claim.value);
        document.getElementById('btn-claim').click();
      });
    </script>
    {% else %}{# my turn #}
    It is <font color="{{ current_player.color.value.html }}">{{ game._players[current_player.uuid].name }}'s</font> turn.
    {% endif %}{# my turn #}
    {% endif %}{# done #}
    <table border="1">
      <tr><td>Name</td><td>Followers</td><td>Score</td></tr>
      {% for player in players | sort(attribute='score', reverse=true) %}
	<tr>
	  <td><font color="{{ player.color.value.html }}">{{ game._players[player.uuid].name }}</font></td>
	  <td>{{ player.followers | selectattr('resource', 'none') | list | length }}</td>
	  <td>{{ player.score }}</td>
	</tr>
      {% endfor %}
    </table>
    Deck: {{ deck | length }}
  </body>
</html>