<div id="resumen">
  <div class="ui container">
    <div class="ui center aligned grid">
      @foreach ($resumen as $ind)
        <div class="three wide column">
          <div class="ui inverted circular segment">
            <div class="ui big header">
              {{$ind->cantidad}}
              <div class="sub header">
                {{$ind->titulo}}
              </div>
            </div>
          </div>
        </div>
        <div class="column"></div>
      @endforeach
    </div>
  </div>
</div>

@push('styles')
  <style type="text/css">
    #resumen {
      background-image: url('{{$urls->images}}/indicadores.jpg');
    }
  </style>
@endpush

@push('scripts')
  <script type="text/javascript">
    var resumen = {
      max_width: 0,
      setup: () => {
        $('#resumen .circular.segment').each(function(i, el) {
          var width = $(this).css('width')
          var w = parseInt(width)
          if (w > resumen.max_width) {
            resumen.max_width = w
          }
          $(this).css('width', resumen.max_width + 'px')
          $(this).css('height', resumen.max_width + 'px')
        })
      }
    }
    $(document).ready(function() {
      resumen.setup()
    })
  </script>
@endpush
