{if $field.nbperrow gte 5}
    {assign var="nbcols" value="6"}
{else}
    {if $field.variants|@count gte 12 and $field.nbperrow lte 4}
        {assign var="nbcols" value=$field.nbperrow}
    {else}
        {assign var="nbcols" value="`$field.nbperrow`"}
    {/if}
{/if}
<style>
.radio-group-btn {
  display: flex;
  flex-wrap: wrap;
}
.radio-group-btn .radio {
  flex: 1;
  margin: 0 0.25rem;
}
.radio-group-btn .radio label {
  pointer-events: auto;
  position: static;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid #cccccc;
  padding: 12px 0;
  border-radius: 5px;
  cursor: pointer;
  color: #444;
  transition: box-shadow 400ms ease;
  font-weight: 700;
  text-align: center;
  width:100%;
}
.radio-group-btn .radio label .radio-icon {
  margin-right: 15px;
  font-size: 30px;
}
.radio-group-btn .radio label:hover {
  /*box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);*/
    background-color: #529fff !important;
    border: 1px solid #529fff;
    color: #ffffff;
}
.radio-group-btn .radio input[type=radio] {
  display: none;
}
.radio-group-btn .radio input[type=radio]:checked + label {
    background-color: #529fff !important;
    border: 1px solid #529fff;
    color: #ffffff;
}
.radio-group-btn .form-error {
  margin-top: 0;
  flex-basis: 100%;
}
.radio-group-btn.radio-group-full {
  flex-direction: column;
}
.radio-group-btn.radio-group-full .radio label {
  margin: 0;
}
.radio-group-btn.radio-group-full .radio label .radio-icon {
  margin-right: 20px;
  font-size: 74px;
}
.radio-group-btn.radio-group-full .radio:first-child {
  margin-bottom: 20px;
}
</style>
{*{if $field.no_clear_div eq 'Y'}
    {assign var="nbcols" value="6"}
{/if}*}
<div id="div_{$field.fieldname}" class='{$class_col} {$add_class} {$class_show} form-group' style='{$field.add_style} {if $field.showon} display:none;{/if}'>
    {if $field.labeltype eq 'A'}<span class="dp-form-title">{$smarty.capture.icon_error} {$smarty.capture.error}{if $field.label_display neq 'N'}{$field.title}{if $field.required neq 'N'}<span class="required_field"> *</span>{/if}{/if}</span>
    {else}
        {if $field.title}<label for="{$field.fieldname}" class="col-xs-12 control-label{if $field.title_mobile} hidden-mobile{/if}">{$smarty.capture.icon_error} {$field.title}{if $field.required neq 'N'}<span class="required_field"> *</span>{/if}</label>{/if}
        {if $field.title_mobile}<label for="{$field.fieldname}" class="{$nb_col_label}  control-label visible-xs">{if $field.label_display neq 'N'}{$field.title_mobile}{if $field.required neq 'N'}<span class="required_field"> *</span>{/if}{/if}</label>{/if}
    {/if}
    {assign var="col_check" value=0}
    {foreach $field.variants as $variant}
        {if $field.nbperrow eq $col_check}
            {*{if $field.no_clear_div neq 'Y'}<div style="clear:both"></div>{/if}*}
            {assign var="col_check" value=1}
        {else}
            {assign var="col_check" value=$col_check+1}
        {/if}
            {math equation="12/x" x=$nbcols assign=cols}

            {* <button id="btn_{$field.fieldname}_{$variant.value}"  data-step="{$key}" data-value="{$variant.value}" data-fieldname="{$field.fieldname}" class="btn btn-default click_btns click_{$field.fieldname}" {if $variant.add_style}style="{$variant.add_style}"{elseif $field.add_style}style="{$field.add_style}"{/if}>{$variant.title}</button>   *}
            <div class="col-xs-{if $field.cols_mobile}{$field.cols_mobile}{else}12{/if} col-sm-{$cols} col-btns div_clic_{$field.fieldname} div_clic_{$field.fieldname}_{$variant@index}" id="div_btn_{$field.fieldname}_{$variant.value}" {if $field.div_style}style="{$field.div_style}"{/if}>
            <div class="form-group radio-group-btn">
              <div class="radio">
                <input class="form-input click_{$field.fieldname} click_btns" data-step="{$key}" data-value="{$variant.value}" data-fieldname="{$field.fieldname}" name="{$field.fieldname}" type="radio" value="{$variant.value}" id="btn_{$field.fieldname}_{$variant.value}"/>
                <label class="form-label" for="btn_{$field.fieldname}_{$variant.value}">{$variant.title}</label>
              </div>
            </div>
        </div>
    {/foreach}
    {if $field.max_show neq '' and $field.variants|count gt $field.max_show}
        <div class="col-xs-{if $field.cols_mobile}{$field.cols_mobile}{else}12{/if} col-sm-{$cols} col-btns" id="show_more_options_{$field.fieldname}" >
            <button id="btn_show_more_options_{$field.fieldname}" class="btn btn-default click_btns" {if $variant.add_style}style="{$variant.add_style}"{elseif $field.add_style}style="{$field.add_style}"{/if}>{t}Voir <i class="fa fa-plus" aria-hidden="true"></i>de choix{/t}
            </button>
        </div>
    {/if}
     {$add_content}
</div>
<input type="hidden" value="" id="{$field.fieldname}" name="defined_values[{$cle_champ}]">