{@load resource="my/cart"}
        <h1>Online Buchung</h1>

        <div class="bookingContainer">

        <ul class="pipeline clearfix">
            <li class="active"><a>Persönliche Daten</a></li>
            <li><a>Buchung prüfen</a></li>
            <li><a>Zahlung</a></li>
        </ul>

        {?items}
            <table class="table table-striped">
            <thead>
                <tr>
                    <th>Beschreibung</th>
                    <th class="text-right">Preis</th>
                </tr>
            </thead>
            <tbody>
                {#items}
                    <tr>
                        <td class="description">
                            <div class="row">
                                <div class="col-sm-3">
                                    {?detail.mediums}
                                    <img src="{@imageurl id=detail.mediums[0].id type="LT" /}" class="img-responsive" >
                                    {/detail.mediums}
                                </div>
                                <div class="col-sm-9">
                                    <strong>
                                        {name}
                                    </strong><br>
                                    <p>
                                       {?arrivalDay}
                                        Anreise: {@date date=arrivalDay /} <br>
                                        Abreise: {@date date=departureDay /} <br>
                                        Nächte: {duration}
                                        {/arrivalDay}
                                    </p>
                                    {?occupancy}
                                        <strong>Belegung</strong><br>
                                        <ul>
                                        {@if cond="{occupancy.adults} == 1"}
                                            <li>1 Erwachsener</li>
                                        {/if}
                                        {@if cond="{occupancy.adults} > 1"}
                                            <li>{occupancy.adults} Erwachsene</li>
                                        {/if}

                                        {#occupancy.children}
                                            <li>Kind {.}</li>
                                        {/occupancy.children}

                                        {#occupancy.pets}
                                            <li>{count}x {name}</li>
                                        {/occupancy.pets}
                                        </ul>
                                    {/occupancy}
                                    <p>
                                        {detail.description|t|s}
                                    </p>
                                    {@eq key=type value="package"}
                                    <p>
                                        <h3>{detail.roomCategory.name}</h3>
                                        {detail.roomCategory.description|t|s}
                                    </p>
                                    <p>
                                        <h3>###includedServices###</h3>
                                        {detail.includedServices|t|s}
                                    </p>
                                    {/eq}
                                </div>
                            </div>
                            {?messages}
                            <div class="row">
                                <div class="col-sm-12">
                                    {#messages}
                                    <div>{.}</div>
                                    {/messages}
                                </div>
                            </div>
                            {/messages}
                        </td>
                        <td class="text-right nowrap">
                            {price|money}
                        </td>
                    </tr>
                {:else}
                    <tr><td>Warenkorb leer</td></tr>
                {/items}
            </tbody>
            </table>

            <div class="row pricePanel">
                <div class="col-sm-12 text-right nowrap">
                    <b>Gesamtpreis</b><br/>
                    <span class="total">{total|money}</span><br/>
                    inkl. USt. exkl. Ortstaxe
                </div>
            </div>

            {@lt key=depositAmount.amount value=total.amount}
            <div class="row depositPanel">
                <div class="col-sm-12 text-right">
                    <b>Anzahlung {depositAmount|money}</b>
                </div>
            </div>
            {/lt}

            <div class="linie"></div>

            <ul class="globalErrorsContainer alert alert-danger" role="alert"></ul>

            {@load resource="my/session"}
            <form id="booking" method="post" class="form-horizontal" role="form">
                <div class="form-group">
                    <label for="email" class="col-md-2 control-label required">email</label>
                    <div class="col-md-10">
                        <input class="form-control" type="text" id="email" name="email" value="{user.email}" />
                    </div>
                </div>
                <div class="form-group">
                    <label for="salutation" class="col-md-2 control-label required">salutation</label>
                    <div class="col-md-4">
                        <select class="form-control" name="salutation" id="salutation">
                            <option value="Familie">Familie</option>
                            <option value="Frau">Frau</option>
                            <option value="Herr">Herr</option>
                        </select>
                    </div>
                    <label for="title" class="col-md-2 control-label">title</label>
                    <div class="col-md-4">
                        <input class="form-control" type="text" id="title" name="title" value="{user.title}" />
                    </div>
                </div>
                <div class="form-group">
                    <label for="firstname" class="col-md-2 control-label required">firstname</label>
                    <div class="col-md-4">
                        <input class="form-control" type="text" id="firstname" name="firstname" value="{user.firstname}" />
                    </div>
                    <label for="lastname" class="col-md-2 control-label required">lastname</label>
                    <div class="col-md-4">
                        <input class="form-control" type="text" id="lastname" name="lastname" value="{user.lastname}" />
                    </div>
                </div>
                <div class="form-group">
                    <label for="street" class="col-md-2 control-label required">street</label>
                    <div class="col-md-10">
                        <input class="form-control" type="text" id="street" name="street" value="{user.street}" />
                    </div>
                </div>
                <div class="form-group">
                    <label for="zipcode" class="col-md-2 control-label required">zipcode</label>
                    <div class="col-md-4">
                        <input class="form-control" type="text" id="zipcode" name="zipcode" value="{user.zipcode}" />
                    </div>
                    <label for="city" class="col-md-2 control-label required">city</label>
                    <div class="col-md-4">
                        <input class="form-control" type="text" id="city" name="city" value="{user.city}" />
                    </div>
                </div>
                <div class="form-group">
                    <label for="country" class="col-md-2 control-label required">country</label>
                    <div class="col-md-10">
                        {@load resource="countries"}
                        <select class="form-control" name="country" id="country">
                            {#countries}
                                <option value="{code}"
                                {@if cond="'{code}' == '{user.country}'"}selected="selected"{/if}
                                >{name}</option>
                            {/countries}
                        </select>
                        {/load}
                    </div>
                </div>
                <div class="form-group">
                    <label for="phone" class="col-md-2 control-label">phone</label>
                    <div class="col-md-4">
                        <input class="form-control" type="text" id="phone" name="phone" value="{user.phone}" />
                    </div>
                    <label for="fax" class="col-md-2 control-label">fax</label>
                    <div class="col-md-4">
                        <input class="form-control" type="text" id="fax" name="fax" value="{user.fax}" />
                    </div>
                </div>
                <div class="form-group">
                    <label for="comment" class="col-md-2 control-label">comment</label>
                    <div class="col-md-10">
                        <textarea class="form-control" id="comment" name="comment" >{user.comment}</textarea>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-md-12 text-right">
                        <a href="#" onclick="Samera.Cart.prepareBooking('#booking'); return false;" class="btn btn-primary">Buchung prüfen</a>
                    </div>
                </div>
            </form>
            {/load}
        {:else}
            Warenkorb leer
        {/items}
        </div>
    {/load}