<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Balance and Submission Tool</title>
        <meta name="Description" content="Sheppy is awesome?">
	<script defer src="/static/balance.js"></script>
        {% include 'default_head_content.html' %}
    </head>
    <body class="bg-special">
        {% include 'navbar.html' %}
	<div id="ident-field" style="display: none;">{{ ident }}</div>
        <div class="container mt-3 mb-3" role="main">
            
            <div class="row">
                <div class="col-sm">
			<h1>Balance Tool</h1>
                </div>
            </div>

	    <div class="row">
		<div class="col">
	    		<button type="button" class="mb-3 btn btn-secondary" onclick="balance()">
				Find Teams
			</button>
	    		</br>
	    		<button id="copyLink" type="button" 
			   class="mb-3 btn btn-secondary" onclick="copy()">
	    		        Copy Submission Link
	    		</button>
	    		<button type="button" 
			   class="mb-3 btn btn-secondary" onclick="queryForPlayerData()">
	    		        Check Submissions
	    		</button>
			</br>
			{% if True %}
			<button class="btn btn-primary" type="button" data-toggle="collapse" 
				data-target="#hilfe" aria-expanded="false"
				aria-controls="hilfe">
				Hilfe Anzeigen
  			</button>
			<div id="hilfe" class="collapse mt-5 border-special">
				<h4>Priorität</h4>
				<p>
					1 = höchste Priorität
					5 = niedrigste Priorität
				</p>
				<hr class="my-3">
				<h4>Fast Position</h4>
				<p>
				<b>Positionen können in den Kurzschreibweisen: top, mid, bot, jungle, support mit "=" und ">" angegeben werden. Zum Beispiel:</b></br></br>
					top > mid > top = adc</br>
					mid = top > bot</br>
					support > jungle</br>
					etc..</br>
				</p>
				<hr class="my-3">
				<h4>Submission Link</h4>
				<p>
					Mit diesem Link können Spieler eine Positionspräferenz selbst übermitteln, einfach diesen Link in den Chat pasten.
				</p>
				<hr class="my-3">
				<h4>Find Teams</h4>
				<p>
				Sobald alle eingetragen sind einmal auf "Find Teams" klicken und auf den Vorschlag warten.
				</p>
				<hr class="my-3">
				<h4>Multiline Input</h4>
				<p>
				    Jeder Kann seine Rollen im Schnellformat in den Chat schreiben, in das Feld unten kopieren und Button drücken (überschreibt existierende Einträge).
				</p>
			</div>	
			{% endif %}
		</div>
	    </div>
	    
	    <div class="spinner-border" id="loading" style="display: none;" role="status">
	   	  <span class="sr-only">Loading...</span>
	    </div>
            <div id="response-container" class="mt-3 mb-3">
            </div>
            
            <hr>


            <form id="form-container" class="row">
	    {% for side in sides %}
                <div class="col-sm">
                    {% for field in range(5) %}
                    <div id="{{ side }}-{{ field }}" class="row mt-2 mb-2">
			<div class="col-sm">

				<!-- player name field -->
				<input class="form-control pname" type="text" placeholder="Player"
					id="playername-{{ side }}-{{ field }}">
					
				<!-- fast postition slection field -->
				<input class="form-control fastpos" type="text" 
					placeholder="top > mid = bot"
					id="check-{{ side }}-fastpos-{{ field }}">


                        </div>
			<div class="col-sm">
				<!-- checkboxes for pos -->
				{% for pos in positions %}
				<select id="prio-{{ side }}-{{ pos }}-{{ field }}"
					class="form-select">
					<option selected>{{ pos }}</option>
  					<option value="1">1</option>
  					<option value="2">2</option>
  					<option value="3">3</option>
  					<option value="4">4</option>
  					<option value="5">5</option>
				</select>
				{% endfor %}
                        </div>
                    </div>
	    	    <hr>
                    {% endfor %}
                </div>
	    {% endfor %}
            </form>
            <hr>

	    <textarea type="text" id="multi-line-copy" rows="10" 
		placeholder="Have everybody write their roles in the form of 'top > mid = sup = jungle >adc' in the chat and then copy it in here and hit 'Use Multiline Input' :)" 
		    class="form-control md-textarea"></textarea>
	    <button type="button" class="mb-3 btn btn-secondary" onclick="parseMultiline()">
	    	Use Multiline Input..
	    </button>

            <hr>
        </div>
        {% include 'footer.html' %}
    </body>
</html>
