  <div class="row">
    <div data-ng-class="['widget-list', 'col-12', 'col-lg-' + col['cols'][0].width]" data-ng-repeat="col in preferences['widgets']" data-widget="{{col['name']}}" data-widget-width="{{col['cols'][0].width}}">
      <div data-ng-repeat="widget in col['cols'][0]['widgets']">
        <div class="card widget mb-3" data-widget="{{widget[0]}}" data-ng-if="widget[0] == 'operationplan'" id="attributes-operationplan" data="operationplan" showoperationplan-drv></div>
        <div class="card widget mb-3" data-widget="{{widget[0]}}" data-ng-if="widget[0] == 'inventorygraph'" id="attributes-inventorygraph" data-ng-show="operationplan.id !== -1 && operationplan.inventoryreport != undefined" data="operationplan" showinventorygraph-drv></div>
        <div class="card widget mb-3" data-widget="{{widget[0]}}" data-ng-if="widget[0] == 'inventorydata'" id="attributes-inventorydata" data-ng-show="operationplan.id !== -1 && operationplan.inventoryreport != undefined" data="operationplan" showinventorydata-drv></div>
        <div class="card widget mb-3" data-widget="{{widget[0]}}" data-ng-if="widget[0] == 'operationproblems'" id="attributes-operationproblems" data-ng-show="operationplan.id !== -1 && (operationplan.problems != undefined || operationplan.info != undefined)" data="operationplan" showproblemspanel-drv></div>
        <div class="card widget mb-3" data-widget="{{widget[0]}}" data-ng-if="widget[0] == 'operationresources'" id="attributes-operationresources" data-ng-show="operationplan.id !== -1 && operationplan.loadplans != undefined" data="operationplan" data-mode="mode" showresourcespanel-drv></div>
        <div class="card widget mb-3" data-widget="{{widget[0]}}" data-ng-if="widget[0] == 'operationflowplans'" id="attributes-operationflowplans" data-ng-show="operationplan.id !== -1 && operationplan.flowplans != undefined" data="operationplan" showbufferspanel-drv></div>
        <div class="card widget mb-3" data-widget="{{widget[0]}}" data-ng-if="widget[0] == 'operationdemandpegging'" id="attributes-operationdemandpegging" data-ng-show="operationplan.id !== -1" data="operationplan" showoperationpeggingpanel-drv></div>
        <div class="card widget mb-3" data-widget="{{widget[0]}}" data-ng-if="widget[0] == 'networkstatus'" id="attributes-networkstatus" data-ng-show="operationplan.network !== undefined" data="operationplan" shownetworkstatus-drv></div>
        <div class="card widget mb-3" data-widget="{{widget[0]}}" data-ng-if="widget[0] == 'downstreamoperationplans'" id="attributes-downstreamoperationplans" data-ng-show="operationplan.downstreamoperationplans !== undefined" data="operationplan" showdownstreamoperationplans-drv></div>
        <div class="card widget mb-3" data-widget="{{widget[0]}}" data-ng-if="widget[0] == 'upstreamoperationplans'" id="attributes-upstreamoperationplans" data-ng-show="operationplan.upstreamoperationplans !== undefined" data="operationplan" showupstreamoperationplans-drv></div>
      </div>
    </div>
  </div>

  <div id="popup2" class="modal" role="dialog" style="z-index: 10000; overflow-y: visible">
    <div class="modal-dialog" data-ng-style="{'width': (databaseerrormodal) ? '500px' : '300px'}">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title text-capitalize" data-ng-if="!databaseerrormodal && !rowlimiterrormodal" translate>unsaved changes</h5>
          <h5 class="modal-title text-capitalize" data-ng-if="rowlimiterrormodal && rowlimiterrormodal" translate>gantt chart rows limit</h5>
          <h5 class="modal-title text-capitalize" data-ng-if="databaseerrormodal" translate>database transaction failed</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body" ng-if="!databaseerrormodal && !rowlimiterrormodal">
          <p translate>Do you want to save your changes first?</p>
        </div>
        <div class="modal-body" ng-if="!databaseerrormodal && rowlimiterrormodal">
          <p translate>The Gantt chart is limited to {{rowlimit}} rows.</p>
          <p translate>Please be patient, the chart may take some time to complete.</p>
        </div>
        <div class="modal-body" ng-if="databaseerrormodal" style="height: 350px; overflow: auto;"></div>
        <div class="modal-footer justify-content-between">
          <input type="submit" id="cancelAbutton" role="button" data-ng-click="modalcallback.resolve('continue'); rowlimiterrormodal = false;" class="btn btn-primary" data-bs-dismiss="modal" value="{{'Continue'|translate }}">
          <input type="submit" id="saveAbutton" role="button" data-ng-if="!databaseerrormodal  && !rowlimiterrormodal" data-ng-click="modalcallback.resolve('save')" class="btn btn-primary" data-bs-dismiss="modal" value="{{'Save'|translate }}">
        </div>
      </div>
    </div>
  </div>

  <script>
    $(function() {
      setTimeout(function () {
        //very simple way to adjust grid width without introducing a new watch in angular controller
        $('#grid').setGridWidth($('#content-main').width());
      }, 50);
    });
  </script>
