@extends('layouts.app')

@section('content')
<section class="section">
<div id="root" class="container">
  <h1 class="title">
    Compras MPS
  </h1>
  <p class="subtitle">
    Bienvenidx a la aplicación de compras del <strong>Mercado Popular de Subsistencia</strong>
  </p>
  <subpedido-select inline-template>
  	<div class="block">
		<div class="field">
		    <label class="label">Escribí el nombre de tu familia o grupo de convivencia</label>
	        <div class="control">
        		<input class="input" @input="onType" v-model="subpedido"></input>
			</div>
			<p class="help">Intentá que sea claro como para que tus compas del barrio te identifiquen.</p>
			<p class="help">Si ya empezaste a hacer tu pedido, empezá a tipear y luego seleccioná tu nombre en la lista una vez que aparezca:</p>
		</div>
	  	<div class="table-container">
	  		<table class="table is-hoverable">
	  			<tbody>
	  				<tr v-for="subpedidosExistente in subpedidosExistentes"  >
	  					<td><a v-text="subpedidosExistente" :href="subpedidosExistente"></a></td>
	  				</tr>
	  			</tbody>
	  		</table>
		</div>
	</div>
  </subpedido-select>
</div>
</section>
@endsection

@section('scripts')
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="{{ asset('js/subpedidos-create.js') }}"></script>
@endsection