{% extends 'base2.html.twig' %}

{% block style %}
    {{ parent() }}
  <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet" />
  <style>
    .card {
        padding: 20px;
    }

    .form-control.select2 {
      height: 40px;
    }

    .select2-container .select2-selection--single {
      height: inherit;
    }

    .check-in {
        display: flex;
        height: 45px;
        align-items: center;
    }

    .check-in h4 {
        padding-right: 10px;
    }
  </style>
{% endblock %}

{% block content %}
    <div class="content">
	    <div class="container-fluid">
	        <div class="row">
                <div class="col-md-12">
                    <div class="card">
                        {% if checkin %}
                            <h3>Checked in</h3>
                            <div class="check-in">
                                <h4>{{ checkin[0].name }}</h4>
                                <a href="{{ path('checkout', {'id': checkin[0].id}) }}" class="btn btn-danger">Checkout</a>
                            </div>
                        {% else %}
                            <form action="{{ path('checkin') }}" method="post" class="form-inline">
                                <div class="header">
                                    <h4>Check in to Depot</h4>
                                    
                                </div>
                                <div>
                                    <select class="form-control select2" name="depot">
                                        <option value="">Select Depot</option>
                                        {% for depot in depots %}
                                            <option value="{{ depot.id }}">{{ depot.name }}</option>
                                        {% endfor %}
                                    </select>

                                    <button class="btn btn-default">Check In</button>
                                </div>
                            </form>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block javascript %}
  {{ parent() }}
  
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>
<script>
  $('.select2').select2();
</script>
  
{% endblock %}