<style>
    #block-add-reco img
    {
        max-width: 60%;
        height: auto;
        margin-top: 10px;
    }

    #block-add-reco #col-reco-exemple-desktop
    {
        display: none;
        justify-content: flex-end;
    }

    #block-add-reco #row-reco-exemple-mobile, #block-add-reco #col-reco-exemple-mobile
    {
        display: flex;
        justify-content: center;
    }

    #block-add-reco #row-reco-exemple-mobile
    {
        margin-top: 10px;
        margin-bottom: 10px;
    }

    @media  all and (min-width: 768px) {
        #block-add-reco #row-reco-exemple-mobile
        {
            display: none;
        }
        #block-add-reco #col-reco-exemple-desktop
        {
            display: flex;
        }
    }

    @media  all and (min-width: 500px) {
        #block-add-reco #col-reco-exemple-mobile img
        {
            max-width: 50%;
        }
    }

</style>
<div class="block-center" id="block-add-reco">
    <div class="box">
        <div class="row">
            <div class="col-xs-12 col-sm-6">
                <img src="{$modules_dir}myvetshopclinique/img/MVS_logo_reco.png" alt="Logo des recommandations MyVetshop">
                <br>
                <br>
                <p>
                    Votre vétérinaire a établi une ration nutritionnelle personnalisée pour votre animal ?
                    Retrouvez les aliments de votre recommandation sur Myvetshop et bénéficiez de nos tarifs privilèges.
                    Veuillez saisir le code RECO* à 5 caractères fourni par votre vétérinaire :
                </p>
                <br>

                <div id="row-reco-exemple-mobile" class="row">
                    <div id="col-reco-exemple-mobile" class="col-xs-12">
                        <img src="{$modules_dir}myvetshopclinique/img/MVS_code_reco_exemple.png" alt="Illustration d'une recommandation MyVetshop">
                    </div>
                </div>

                <br>

                    <form action="{if !$errorCodeReco && isset($animals)}#header{else}{$link->getModuleLink('myvetshopclinique', 'submitcodereco', [], true)|escape:'html'}{/if}" method="post">
                        <label for="code_reco">Code RECO :</label><br>

                        <div class="form-group">
                            <input type="text" class="form-control" id="code_reco" name="code" style="width: 130px" placeholder="XXXXX" minlength="5" maxlength="5" value="{if isset($codeReco)}{$codeReco}{/if}">
                            {if isset($errorCodeReco) && $errorCodeReco !== null}<span class="inline-infos text-danger">{$errorCodeReco}</span>{/if}
                        </div>

                        {if !$errorCodeReco && isset($animals) }

                            <label for="animal">Veuillez sélectionner l'animal associé à cette recommandation :</label><br>
                            {foreach $animals as $animal}
                                <input type="radio" name="id_animal" value="{$animal->id}" id="id_animal_{$animal->id}" {if $animalDefaultSelected && $animalDefaultSelected->id == $animal->id} checked{/if}>
                                <label for="id_animal_{$animal->id}">{$animal->nom} ({$animal->espece}) {if $animal->id == '_new'}(Créer une nouvelle fiche){/if}</label>
                                <br>
                            {/foreach}
                            <br>
                            <button type="submit" class="btn btn-default button button-medium" style="width: 130px">
                                <span>Terminer <i class="icon-chevron-right"></i> </span>
                            </button>

                        {else}

                            <button type="submit" class="btn btn-default button button-medium" style="width: 130px">
                                <span>Continuer <i class="icon-chevron-right"></i></span>
                            </button>

                        {/if}
                    </form>
            </div>

            <div id="col-reco-exemple-desktop" class="col-xs-12 col-sm-6">
                <img src="{$modules_dir}myvetshopclinique/img/MVS_code_reco_exemple.png" alt="Illustration d'une recommandation MyVetshop">
            </div>
        </div>
    </div>
</div>
