<div class="row" style="padding-top:10px;font-size:13px;">
  <div class="narrowchart">
    <div id="accordion">
      <!--  CONTENEUR  -->
      <div class="accordionheader" ng-click="showConteneur=!showConteneur">
        <h4>
          <translate
            >print.blocks_attributes.legend_attributes.container</translate
          >
          <i
            class="fa fa-angle-down accordionheader_i"
            ng-show="!showConteneur"
          ></i>
          <i
            class="fa fa-angle-up accordionheader_i"
            ng-show="showConteneur"
          ></i>
        </h4>
      </div>

      <!------------------------------------------------------------------------------>
      <!-------------------------  CONTENEUR  ---------------------------------------->

      <div ng-show="showConteneur">
        <div style="height:5px;"></div>
        <div class="accordionbody" style="background-color: white;">
          <div class="col-md-12">
            <div class="col-md-12">
              <div class="form-group">
                <span class="control-label" for="h"
                  ><translate
                    >print.blocks_attributes.identificationColor</translate
                  ></span
                >
                <br />
                <input
                  colorpicker
                  class="color_picker"
                  style="background-color:{{res.render.color}};"
                  ng-model="res.render.color"
                />
              </div>
            </div>
          </div>
          <div class="col-md-12" ng-show="false">
            <div class="col-md-12">
              <!-- Text input-->
              <div class="form-group">
                <span class="control-label" for="x"
                  ><translate
                    >print.blocks_attributes.legend_attributes.overflowPolitic</translate
                  ></span
                >
                <br />
                <table>
                  <tr>
                    <td width="10px"></td>
                    <td>
                      <input
                        type="radio"
                        name="politic"
                        ng-model="res.data.overflowPolitic"
                        class="form-control"
                        value="shrink"
                        style="width: 15px;"
                      />
                    </td>
                    <td>
                      <font size="1"
                        ><translate
                          >print.blocks_attributes.legend_attributes.shrink_sizes</translate
                        ></font
                      >
                    </td>
                  </tr>
                  <tr>
                    <td width="10px"></td>
                    <td>
                      <input
                        type="radio"
                        name="politic"
                        ng-model="res.data.overflowPolitic"
                        class="form-control"
                        value="clip"
                        style="width: 15px;"
                      />
                    </td>
                    <td>
                      <font size="1"
                        ><translate
                          >print.blocks_attributes.legend_attributes.truncate</translate
                        ></font
                      >
                    </td>
                  </tr>
                </table>
              </div>
            </div>
          </div>
          <div class="col-md-12">
            <div class="col-md-12">
              <!-- Text input-->
              <div class="form-group">
                <span class="control-label" for="x"
                  ><translate
                    >print.blocks_attributes.legend_attributes.x_position</translate
                  ></span
                >
                <br />
                <input
                  id="x"
                  name="x"
                  type="text"
                  unitconvert
                  ng-model="res.data.absoluteX"
                  class="form-control"
                />
              </div>
            </div>
          </div>
          <div class="col-md-12">
            <div class="col-md-12">
              <!-- Text input-->
              <div class="form-group">
                <span class="control-label" for="y"
                  ><translate
                    >print.blocks_attributes.legend_attributes.y_position</translate
                  ></span
                >
                <br />
                <input
                  id="y"
                  name="y"
                  type="text"
                  unitconvert
                  ng-model="res.data.absoluteY"
                  class="form-control"
                />
              </div>
            </div>
          </div>
          <div class="col-md-12">
            <div class="col-md-12">
              <div class="form-group">
                <span class="control-label" for="w"
                  ><translate
                    >print.blocks_attributes.legend_attributes.width</translate
                  ></span
                >
                <br />
                <input
                  id="x"
                  name="x"
                  type="text"
                  unitconvert
                  ng-model="res.data.maxWidth"
                  class="form-control"
                />
              </div>
            </div>
          </div>
          <div class="col-md-12">
            <div class="col-md-12">
              <!-- Text input-->
              <div class="form-group">
                <span class="control-label" for="h"
                  ><translate
                    >print.blocks_attributes.legend_attributes.height</translate
                  ></span
                >
                <br />
                <input
                  id="y"
                  name="y"
                  type="text"
                  unitconvert
                  ng-model="res.data.maxHeight"
                  class="form-control"
                />
              </div>
            </div>
          </div>

          <!-- Nombre de colonnes -->
          <div class="col-md-12">
            <div class="col-md-12">
              <div class="form-group">
                <span class="control-label" for="columnNumberInput"
                  ><translate
                    >print.blocks_attributes.legend_attributes.columns_number</translate
                  ></span
                >
                <br />
                <!--<input  type="text" ng-model="res.data.columnNumber" class="form-control">-->

                <select
                  id="columnNumberInput"
                  class="form-control"
                  ng-model="res.data.columnNumber"
                  ng-options="colNum for colNum in columnNumbersArray"
                  style="font-size:13px;"
                ></select>
              </div>
            </div>
          </div>

          <!-- Epaisseur de la bordure -->
          <div class="col-md-12">
            <div class="col-md-12">
              <div class="form-group">
                <span class="control-label" for="borderSizeChoise"
                  ><translate
                    >print.blocks_attributes.map_attributes.borderSize</translate
                  ></span
                >
                <br />

                <select
                  id="borderSizeChoise"
                  class="form-control"
                  ng-model="res.data.borderSize"
                  ng-options="bsize for bsize in borderSizeArray"
                  style="font-size:13px;"
                ></select>
              </div>
            </div>
          </div>

          <!-- Couleur de la bordure -->
          <div class="col-md-12">
            <div class="col-md-12">
              <div class="form-group">
                <span class="control-label" for="h"
                  ><translate
                    >print.blocks_attributes.frameBorderColor</translate
                  ></span
                >
                <br />

                <xgos-colour-picker
                  colour="res.data.frameBorderColor"
                ></xgos-colour-picker>
                <!--
                              <input  colorpicker
                                        class="color_picker"
                                        style="background-color:{{res.data.frameBorderColor}};"
                                        ng-model="res.data.frameBorderColor"/>
                                    -->
              </div>
            </div>
          </div>

          <!-- Regrouper par thème -->
          <div class="col-md-12">
            <div class="col-md-12">
              <div class="form-group">
                <span class="control-label" for="h">
                  <translate
                    >print.blocks_attributes.legend_attributes.groupByTheme</translate
                  >
                </span>
                <br />
                <input type="checkbox" ng-model="res.data.groupByTheme" />
              </div>
            </div>
          </div>
        </div>
      </div>

      <!---------------------------------------------------------------------------->
      <!-------------------------  THEMES  ---------------------------------------->

      <div
        class="accordionheader"
        ng-click="showtheme=!showtheme"
        ng-show="res.data.groupByTheme"
      >
        <p style="background-color: white;">____</p>
        <h4>
          <translate
            >print.blocks_attributes.legend_attributes.themes</translate
          >
          <i
            class="fa fa-angle-down accordionheader_i"
            ng-show="!showtheme"
          ></i>
          <i class="fa fa-angle-up accordionheader_i" ng-show="showtheme"></i>
        </h4>
      </div>
      <div class="accordionbody" ng-show="showtheme && res.data.groupByTheme">
        <div style="height:5px;"></div>
        <!-- Espace entre les couches -->
        <!--
                <div class="col-md-12"><div class="col-md-12">
                    <div class="form-group">
                      <span class="control-label"><translate>print.blocks_attributes.legend_attributes.layerSpace</translate></span>  <br />
                      <!--<input  type="text" ng-model="res.data.columnNumber" class="form-control">-->
        <!--
                      <input type="number" ng-model="res.data.layerSpace" class="form-control">
            
                    </div>
                </div></div>
-->
        <!-- FONT FAMILY -->
        <div class="col-md-12">
          <div class="col-md-12">
            <div class="form-group">
              <span class="control-label"
                ><translate
                  >print.blocks_attributes.legend_attributes.fontFamily</translate
                ></span
              >
              <br />
              <!--<input  type="text" ng-model="res.data.columnNumber" class="form-control">-->
              <select
                ng-options="font.fontname as font.fontname for font in legStyles.fontList | orderBy: fontname"
                ng-model="res.data.themeFont"
              >
              </select>
            </div>
          </div>
        </div>

        <!-- FONT SIZE -->
        <div class="col-md-12">
          <div class="col-md-12">
            <div class="form-group">
              <span class="control-label"
                ><translate
                  >print.blocks_attributes.legend_attributes.layerFontSize</translate
                ></span
              >
              <br />
              <!--<input  type="text" ng-model="res.data.columnNumber" class="form-control">-->

              <input
                type="number"
                class="form-control"
                ng-change="checkNumberIsCorrect({val:'themeFontSize',min:4})"
                ng-model="res.data.themeFontSize"
              />
            </div>
          </div>
        </div>

        <!-- FONT STYLE -->
        <div class="col-md-12">
          <div class="col-md-12">
            <div class="form-group">
              <span class="control-label"
                ><translate
                  >print.blocks_attributes.legend_attributes.FontStyle</translate
                ></span
              >
              <br />
              <div>
                <input
                  type="checkbox"
                  ng-model="res.data.themeFontBold"
                /><translate
                  >print.blocks_attributes.legend_attributes.Bold</translate
                >
              </div>
              <div>
                <input
                  type="checkbox"
                  ng-model="res.data.themeFontItalic"
                /><translate
                  >print.blocks_attributes.legend_attributes.Italic</translate
                >
              </div>
              <div>
                <input
                  type="checkbox"
                  ng-model="res.data.themeFontUnderline"
                /><translate
                  >print.blocks_attributes.legend_attributes.Underline</translate
                >
              </div>
            </div>
          </div>
        </div>

        <!-- ESPACEMENT ENTRE THEMES -->
        <div class="col-md-12">
          <div class="col-md-12">
            <div class="form-group">
              <!--                      <span class="control-label"><translate>print.blocks_attributes.legend_attributes.layerSpaceBefore</translate></span>  <br /> -->
              <!--<input  type="text" ng-model="res.data.columnNumber" class="form-control">-->
              <span class="control-label"
                ><translate
                  >print.blocks_attributes.legend_attributes.themeSpace</translate
                ></span
              >
              <br />

              <input
                type="number"
                ng-model="res.data.themeSpaceBefore"
                class="form-control"
              />
            </div>
          </div>
        </div>
      </div>

      <!---------------------------------------------------------------------------->
      <!-------------------------  COUCHES  ---------------------------------------->

      <div class="accordionheader" ng-click="showlayer=!showlayer">
        <p style="background-color: white;">____</p>
        <h4>
          <translate
            >print.blocks_attributes.legend_attributes.layers</translate
          >
          <i
            class="fa fa-angle-down accordionheader_i"
            ng-show="!showlayer"
          ></i>
          <i class="fa fa-angle-up accordionheader_i" ng-show="showlayer"></i>
        </h4>
      </div>
      <div class="accordionbody" ng-show="showlayer">
        <div style="height:5px;"></div>
        <!-- Espace entre les couches -->
        <!--
                <div class="col-md-12"><div class="col-md-12">
                    <div class="form-group">
                      <span class="control-label"><translate>print.blocks_attributes.legend_attributes.layerSpace</translate></span>  <br />
                      <!--<input  type="text" ng-model="res.data.columnNumber" class="form-control">-->
        <!--
                      <input type="number" ng-model="res.data.layerSpace" class="form-control">
            
                    </div>
                </div></div>
-->
        <!-- FONT FAMILY -->
        <div class="col-md-12">
          <div class="col-md-12">
            <div class="form-group">
              <span class="control-label"
                ><translate
                  >print.blocks_attributes.legend_attributes.fontFamily</translate
                ></span
              >
              <br />
              <!--<input  type="text" ng-model="res.data.columnNumber" class="form-control">-->
              <select
                ng-options="font.fontname as font.fontname for font in legStyles.fontList | orderBy: fontname"
                ng-model="res.data.layerFont"
              >
              </select>
            </div>
          </div>
        </div>

        <!-- FONT SIZE -->
        <div class="col-md-12">
          <div class="col-md-12">
            <div class="form-group">
              <span class="control-label"
                ><translate
                  >print.blocks_attributes.legend_attributes.layerFontSize</translate
                ></span
              >
              <br />
              <!--<input  type="text" ng-model="res.data.columnNumber" class="form-control">-->

              <input
                type="number"
                ng-model="res.data.layerFontSize"
                ng-change="checkNumberIsCorrect({val:'layerFontSize',min:4})"
                class="form-control"
              />
            </div>
          </div>
        </div>

        <!-- FONT STYLE -->
        <div class="col-md-12">
          <div class="col-md-12">
            <div class="form-group">
              <span class="control-label"
                ><translate
                  >print.blocks_attributes.legend_attributes.FontStyle</translate
                ></span
              >
              <br />
              <div>
                <input
                  type="checkbox"
                  ng-model="res.data.layerFontBold"
                /><translate
                  >print.blocks_attributes.legend_attributes.Bold</translate
                >
              </div>
              <div>
                <input
                  type="checkbox"
                  ng-model="res.data.layerFontItalic"
                /><translate
                  >print.blocks_attributes.legend_attributes.Italic</translate
                >
              </div>
              <div>
                <input
                  type="checkbox"
                  ng-model="res.data.layerFontUnderline"
                /><translate
                  >print.blocks_attributes.legend_attributes.Underline</translate
                >
              </div>
            </div>
          </div>
        </div>

        <!-- FONT WEIGTH -->
        <!--                
                <div class="col-md-12"><div class="col-md-12">
                    <div class="form-group">
                        <span class="control-label"><translate>print.blocks_attributes.legend_attributes.fontFamily</translate></span>  <br />
                        <!--<input  type="text" ng-model="res.data.columnNumber" class="form-control">-->
        <!--
                        <select ng-options="weight as weight for weight in fontweights"
                            ng-model="res.data.layerFont">
                        </select>
                    </div>
                </div></div>
    -->
        <!-- PADDING -->
        <div class="col-md-12">
          <div class="col-md-12">
            <div class="form-group">
              <!--                        <span class="control-label" style="background-color: rgba(240, 190, 190, 1);"><translate>print.blocks_attributes.legend_attributes.textPadding</translate></span>  <br />
-->
              <span class="control-label"
                ><translate
                  >print.blocks_attributes.legend_attributes.textPadding</translate
                ></span
              >
              <br />
              <!--<input  type="text" ng-model="res.data.columnNumber" class="form-control">-->
              <input
                type="text"
                ng-model="res.data.textPadding"
                class="form-control"
              />
            </div>
          </div>
        </div>

        <!-- ESPACEMENT ENTRE COUCHES -->
        <div class="col-md-12">
          <div class="col-md-12">
            <div class="form-group">
              <!--                      <span class="control-label"><translate>print.blocks_attributes.legend_attributes.layerSpaceBefore</translate></span>  <br /> -->
              <!--<input  type="text" ng-model="res.data.columnNumber" class="form-control">-->
              <span class="control-label"
                ><translate
                  >print.blocks_attributes.legend_attributes.layerSpace</translate
                ></span
              >
              <br />

              <input
                type="number"
                ng-model="res.data.layerSpaceBefore"
                class="form-control"
              />
            </div>
          </div>
        </div>

        <!-- Icône et nom de couche sur même ligne quand légende simple. -->
        <div class="col-md-12">
          <div class="col-md-12">
            <div class="form-group">
              <span
                class="control-label"
                title="{{'print.blocks_attributes.legend_attributes.inlineWhenSimpleTooltip' | translate}}"
              >
                <translate
                  >print.blocks_attributes.legend_attributes.inlineWhenSimple</translate
                >
              </span>
              <br />
              <input type="checkbox" ng-model="res.data.inlineWhenSimple" />
            </div>
          </div>
        </div>
      </div>

      <!---------------------------------------------------------------------------->
      <!-------------------------  CATEGORIES  ---------------------------------------->

      <div class="accordionheader" ng-click="showClass=!showClass">
        <p style="background-color: white;">____</p>
        <h4>
          Catégories
          <i
            class="fa fa-angle-down accordionheader_i"
            ng-show="!showClass"
          ></i>
          <i class="fa fa-angle-up accordionheader_i" ng-show="showClass"></i>
        </h4>
      </div>

      <div class="accordionbody" ng-show="showClass">
        <!-- FONT FAMILY -->
        <div class="col-md-12">
          <div class="col-md-12">
            <div class="form-group">
              <span class="control-label"
                ><translate
                  >print.blocks_attributes.legend_attributes.fontFamily</translate
                ></span
              >
              <br />
              <!--<input  type="text" ng-model="res.data.columnNumber" class="form-control">-->
              <select
                ng-options="font.fontname as font.fontname for font in legStyles.fontList | orderBy: fontname"
                ng-model="res.data.classFont"
              >
              </select>
            </div>
          </div>
        </div>

        <div class="col-md-12">
          <div class="col-md-12">
            <div class="form-group">
              <span class="control-label"
                ><translate
                  >print.blocks_attributes.legend_attributes.classFontSize</translate
                ></span
              >
              <br />
              <input
                type="number"
                ng-change="checkNumberIsCorrect({val:'classFontSize',min:4})"
                ng-model="res.data.classFontSize"
                class="form-control"
              />
            </div>
          </div>
        </div>

        <!-- FONT STYLE -->
        <div class="col-md-12">
          <div class="col-md-12">
            <div class="form-group">
              <span class="control-label"
                ><translate
                  >print.blocks_attributes.legend_attributes.FontStyle</translate
                ></span
              >
              <br />
              <div>
                <input
                  type="checkbox"
                  ng-model="res.data.classFontBold"
                /><translate
                  >print.blocks_attributes.legend_attributes.Bold</translate
                >
              </div>
              <div>
                <input
                  type="checkbox"
                  ng-model="res.data.classFontItalic"
                /><translate
                  >print.blocks_attributes.legend_attributes.Italic</translate
                >
              </div>
              <div>
                <input
                  type="checkbox"
                  ng-model="res.data.classFontUnderline"
                /><translate
                  >print.blocks_attributes.legend_attributes.Underline</translate
                >
              </div>
            </div>
          </div>
        </div>

        <div class="col-md-12">
          <div class="col-md-12">
            <div class="form-group">
              <span class="control-label"
                ><translate
                  >print.blocks_attributes.legend_attributes.iconPadding</translate
                ></span
              >
              <br />
              <!--<input  type="text" ng-model="res.data.columnNumber" class="form-control">-->
              <input
                type="text"
                ng-model="res.data.iconPadding"
                class="form-control"
              />
            </div>
          </div>
        </div>

        <div class="col-md-12">
          <div class="col-md-12">
            <div class="form-group">
              <span class="control-label"
                ><translate
                  >print.blocks_attributes.legend_attributes.scaleForAllIcons</translate
                ></span
              >
              <br />
              <!--<input  type="text" ng-model="res.data.columnNumber" class="form-control">-->

              <input
                type="number"
                ng-model="res.data.scaleForAllIcons"
                class="form-control"
              />
            </div>
          </div>
        </div>

        <!--
                <div class="col-md-12"><div class="col-md-12">
                    <div class="form-group">
                      <span class="control-label"><translate>print.blocks_attributes.legend_attributes.spacingAfter</translate></span>  <br />
                      <!--<input  type="text" ng-model="res.data.columnNumber" class="form-control">-->
        <!--
                      <input type="number" ng-model="res.data.spacingAfter" class="form-control">
            
                    </div>
                </div></div>
-->
        <div class="col-md-12">
          <div class="col-md-12">
            <div class="form-group">
              <span class="control-label"
                ><translate
                  >print.blocks_attributes.legend_attributes.classSpace</translate
                ></span
              >
              <br />
              <!--<input  type="text" ng-model="res.data.columnNumber" class="form-control">-->

              <input
                type="number"
                ng-model="res.data.classSpace"
                class="form-control"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
