
<script>

	import Button from './Chat_button.svelte';
	export let layout = "";
	export let back = "";

</script>

<div class="grid_box">

	<!-- back -->
	<Button bind:layout new_layout={back} my_class="back icon" my_title="go back {back}">
		back
	</Button>

	<!-- user -->
	<Button my_class="user deactivate">
		&lt;user&gt;
	</Button>

	<!-- close -->
	<Button bind:layout new_layout="close" my_class="close icon">
		close
	</Button>

	<!-- panel_mute -->

	<!-- MUTE -->
	<div class="panel panel_mute __border_top">
		<p class="__center">mute this user for a time :</p>
		<form>
			<!-- forever -->
			<input  id="chat_mute_forever" class="__check_change_next" type="checkbox">
			<label for="chat_mute_forever" class="_checkbox"><p>forever</p></label>
			<div class="__to_block">
				<!-- minutes -->
				<label for="chat_mute_minutes" class="_select">
					<p>minutes :</p>
					<select id="chat_mute_minutes">
						<option value="01">00</option>
						<option value="01">01</option>
						<option value="02">02</option>
						<option value="03">03</option>
						<option value="04">04</option>
						<option value="05">05</option>
						<option value="06">06</option>
						<option value="07">07</option>
						<option value="10">10</option>
						<option value="11">11</option>
						<option value="12">12</option>
						<option value="13">13</option>
						<option value="14">14</option>
						<option value="15">15</option>
						<option value="16">16</option>
						<option value="17">17</option>
						<option value="20">20</option>
						<option value="21">21</option>
						<option value="22">22</option>
						<option value="23">23</option>
						<option value="24">24</option>
						<option value="25">25</option>
						<option value="26">26</option>
						<option value="27">27</option>
						<option value="30">30</option>
						<option value="31">31</option>
						<option value="32">32</option>
						<option value="33">33</option>
						<option value="34">34</option>
						<option value="35">35</option>
						<option value="36">36</option>
						<option value="37">37</option>
						<option value="40">40</option>
						<option value="41">41</option>
						<option value="42">42</option>
						<option value="43">43</option>
						<option value="44">44</option>
						<option value="45">45</option>
						<option value="46">46</option>
						<option value="47">47</option>
						<option value="50">50</option>
						<option value="51">51</option>
						<option value="52">52</option>
						<option value="53">53</option>
						<option value="54">54</option>
						<option value="55">55</option>
						<option value="56">56</option>
						<option value="57">57</option>
						<option value="60">60</option>
					</select>
				</label>
				<!-- hours -->
				<label for="chat_mute_hours" class="_select">
					<p>hours :</p>
					<select id="chat_mute_hours">
						<option value="01">00</option>
						<option value="01">01</option>
						<option value="02">02</option>
						<option value="03">03</option>
						<option value="04">04</option>
						<option value="05">05</option>
						<option value="06">06</option>
						<option value="07">07</option>
						<option value="10">10</option>
						<option value="11">11</option>
						<option value="12">12</option>
						<option value="13">13</option>
						<option value="14">14</option>
						<option value="15">15</option>
						<option value="16">16</option>
						<option value="17">17</option>
						<option value="20">20</option>
						<option value="21">21</option>
						<option value="22">22</option>
						<option value="23">23</option>
						<option value="24">24</option>
						<option value="25">25</option>
						<option value="26">26</option>
						<option value="27">27</option>
						<option value="30">30</option>
						<option value="31">31</option>
						<option value="32">32</option>
						<option value="33">33</option>
						<option value="34">34</option>
						<option value="35">35</option>
						<option value="36">36</option>
						<option value="37">37</option>
						<option value="40">40</option>
						<option value="41">41</option>
						<option value="42">42</option>
						<option value="43">43</option>
						<option value="44">44</option>
						<option value="45">45</option>
						<option value="46">46</option>
						<option value="47">47</option>
						<option value="50">50</option>
						<option value="51">51</option>
						<option value="52">52</option>
						<option value="53">53</option>
						<option value="54">54</option>
						<option value="55">55</option>
						<option value="56">56</option>
						<option value="57">57</option>
						<option value="60">60</option>
					</select>
				</label>
				<!-- days -->
				<label for="chat_mute_days" class="_select">
					<p>days :</p>
					<select id="chat_mute_days">
						<option value="00">00</option>
						<option value="01">01</option>
						<option value="02">02</option>
						<option value="03">03</option>
						<option value="04">04</option>
						<option value="05">05</option>
						<option value="06">06</option>
						<option value="07">07</option>
						<option value="10">10</option>
						<option value="11">11</option>
						<option value="12">12</option>
						<option value="13">13</option>
						<option value="14">14</option>
						<option value="15">15</option>
						<option value="16">16</option>
						<option value="17">17</option>
						<option value="20">20</option>
						<option value="21">21</option>
						<option value="22">22</option>
						<option value="23">23</option>
						<option value="24">24</option>
						<option value="25">25</option>
						<option value="26">26</option>
						<option value="27">27</option>
						<option value="30">30</option>
						<option value="31">31</option>
					</select>
				</label>
			</div>
			<input type="submit" value="&#x2BA1">
		</form>
	</div>


</div>

<style>

	/* grid layout "mute"
	*/
	.grid_box :global(.back        ) {grid-area: back;}

	.grid_box :global(.back      ) {grid-area: back;}
	.grid_box :global(.user      ) {grid-area: user;}
	.grid_box :global(.close     ) {grid-area: close;}
	.grid_box :global(.panel_mute) {grid-area: panel_mute;}
	.grid_box {
		grid:
			' back        user        close       ' auto
			' panel_mute  panel_mute  panel_mute  ' 1fr
			/ auto        1fr         auto        ;
	}


	/* checkbox
	*/
	form input[type=checkbox] {
		display: none;
	}
	form label._checkbox {
		margin: 0px auto 0px 10px;
		padding-left: 10px;
		cursor: pointer;
	}
	form label._checkbox::after {
		content: "";
		position: absolute;
		top: calc(50% - 6px);
		left: 0px;
		width: 12px;
		height: 12px;
		border: 2px solid rgb(150, 150, 150);
		box-sizing: border-box;
		cursor: pointer;
	}
	form input[type=checkbox]:checked
	+ label._checkbox::after {
		background-color: rgb(200, 200, 200);
	}


	/* select
	*/
	form label._select {
		flex-direction: row;
	}
	form label._select p {
		margin: 0px;
	}
	form select {
		margin: auto auto auto 10px;
		background-color: rgb(220, 220, 220);
		border: none;
		padding: 5px;
		cursor: pointer;
	}
	form select:hover {
		background-color: rgb(200, 200, 200);
	}


	/* submit
	*/
	form input[type=submit] {
		margin-top: 20px;
	}


</style>


