{@load resource="my/session"}
    <form id="voucherForm" class="form-horizontal" role="form">
        <ul class="globalErrorsContainer alert alert-danger" role="alert"></ul>

        <div class="form-group">
            <label for="voucherTitle" class="col-md-2 control-label required">Überschrift</label>
            <div class="col-md-10">
                <input class="form-control" type="text" id="voucherTitle" name="voucherTitle" value="Lieber Max Mustermann," />
            </div>
        </div>
        <div class="form-group">
            <label for="voucherText" class="col-md-2 control-label required">Text</label>
            <div class="col-md-10">
                <textarea class="form-control" id="voucherText" name="voucherText">dieser Gutschein ist für Dich - er wird dir ein paar erholsame Stunden in unserem Hotel ermöglichen. Lass dich ordentlich verwöhnen und genieße die Zeit im herrlichen Ambiente!</textarea>
            </div>
        </div>
        <div class="form-group">
            <label for="voucherAmount" class="col-md-2 control-label required">Betrag</label>
            <div class="col-md-10">
                <input class="form-control" type="text" id="voucherAmount" name="voucherAmount" value="100,00" />
            </div>
        </div>
        <div class="form-group">
            <label for="voucherAmount" class="col-md-2 control-label required">Vorlage</label>
            <div class="col-md-10">
                {@load resource="vouchertemplates"}
                    {#voucherTemplates}
                        <div style="float: left; text-align: center; margin-right: 20px;">
                            <img src="{@voucherPreview id=id /}" /><br/>
                            <input type="radio" name="voucherTemplate" value="{id}" {@eq key=$idx value=0}checked="checked"{/eq}><br/>
                            {name}
                        </div>
                    {/voucherTemplates}
                {/load}
            </div>
        </div>
        <div class="form-group">
            <label for="email" class="col-md-2 control-label required">E-Mail</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">Anrede</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">Titel</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">Vorname</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">Nachname</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">Straße</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">PLZ</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">Ort</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">Land</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">
            <div class="col-md-12 text-right">
                <a class="btn btn-default" style="margin-right: 15px;" href="#" onclick="Samera.Voucher.preview('#voucherForm'); return false;">Vorschau generieren</a>
                <a class="btn btn-primary" href="#" onclick="Samera.Voucher.create('#voucherForm'); return false;">Gutschein bestellen</a>
            </div>
        </div>

        <img id="preview" style="display: none;" >
    </form>
    {/load}