<div class="container-fluid container-cards-pf">
  <ol class="breadcrumb" style="margin-bottom: 0px;">
    <li><a ui-sref="multichart" translate>multicharts.BREADCRUMB</a></li>
  </ol>

  <customizable-error-message ng-show="$ctrl.showErr" dismissible="true" err-title="$ctrl.errTitle"
                                                                         err-message="$ctrl.errMessage"/>

    <div class="row">
      <div class="col-xs-12 col-md-4">
        <form name="$ctrl.form" class="input-group" ng-submit="$ctrl.createChart()">
          <span class="input-group-addon" translate>multicharts.form.NAME</span>
          <input type="text" class="form-control" translate-attr="{ placeholder: 'multicharts.form.PLACEHOLDER' }" ng-model="$ctrl.newChartName"/>
          <input type="submit" translate-attr="{ value: 'multicharts.form.SUBMIT_LABEL' }"/>
        </form>
      </div>
    </div>

    <div class="row row-cards-pf">
      <div class="container-fluid container-cards-pf">

        <div ng-repeat="chart in $ctrl.chartNames">
          <div class="col-xs-12 col-md-10">
            <multichart-chart chart="chart"></multichart-chart>
          </div>
        </div>

      </div>
    </div>

</div>