<commit_before>

<div class="text-center">
  <div class="btn-group" role="group">
    <button ng-repeat="month in ctrl.months"
      ng-disabled="!ctrl.isValidMonth(month)"
      class="btn"
      ng-class="{ 'btn-default': !ctrl.isMonthSelected(month), 'btn-primary': ctrl.isMonthSelected(month) }"
      ng-click="ctrl.selectMonth(month)">
      {{ month.name }}
    </button>
  </div>
</div>
<div class="text-center">
  <div class="btn-group" role="group">
    <button ng-repeat="year in ctrl.years"
      ng-disabled="!ctrl.isValidYear(year)"
      class="btn"
      ng-class="{ 'btn-default': !ctrl.isYearSelected(year), 'btn-primary': ctrl.isYearSelected(year) }"
      ng-click="ctrl.selectYear(year)">
      {{ year }}
    </button>
  </div>
</div>
<div class="text-center">
  <div class="btn-group" role="group">
    <button ng-repeat="state in ctrl.states"
      class="btn"
      ng-class="{ 'btn-default': !ctrl.isStateSelected(state), 'btn-primary': ctrl.isStateSelected(state) }"
      ng-click="ctrl.selectState(state)">
      {{ state.name }}
    </button>
  </div>
</div>

<br>

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

    <div class="col-md-6 col-lg-4" ng-repeat="recall in ctrl.recallsByState[ctrl.criteria.state].recalls">
      <div class="card">
          <div>
            <h5>{{ recall.product_type }}: {{ recall.event_id }}</h5>
            <h4>
              {{ recall.recalling_firm }}
              ({{ recall.city }}, {{ recall.state }} {{ recall.country }})
              <span class="label label-{{ ctrl.getClassificationStyle(recall.classification) }}" tooltip-html-unsafe="{{ ctrl.getClassificationDescription(recall.classification) }}">{{ recall.classification }}</span>
              <span class="label label-{{ ctrl.getStatusStyle(recall.status) }}" tooltip-html-unsafe="{{ ctrl.getStatusDescription(recall.status) }}">{{ recall.status }}</span>
            </h4>
          </div>

          <div>
            <h4>Reason</h4>
            <div>{{ recall.reason_for_recall }}</div>
          </div>

          <div>
            <h4>Product</h4>
            <div>{{ recall.product_description }}</div>
            <div>{{ recall.product_quantity }}</div>
            <div>{{ recall.code_info }}</div>
          </div>

          <div>
            <h4>Distribution</h4>
            <div>{{ recall.distribution_pattern }}</div>
          </div>

          <div>
            <h4>Recall Date and Notification</h4>
            <div>{{ recall.recall_initiation_date }}</div>
            <div>{{ recall.voluntary_mandated }}</div>
            <div>{{ recall.report_date }}: {{ recall.initial_firm_notification }}</div>
          </div>
        </div>
    </div>

  </div>
</div>
<commit_msg>Update responsive handling of recall cards<commit_after>

<div class="text-center">
  <div class="btn-group" role="group">
    <button ng-repeat="month in ctrl.months"
      ng-disabled="!ctrl.isValidMonth(month)"
      class="btn"
      ng-class="{ 'btn-default': !ctrl.isMonthSelected(month), 'btn-primary': ctrl.isMonthSelected(month) }"
      ng-click="ctrl.selectMonth(month)">
      {{ month.name }}
    </button>
  </div>
</div>
<div class="text-center">
  <div class="btn-group" role="group">
    <button ng-repeat="year in ctrl.years"
      ng-disabled="!ctrl.isValidYear(year)"
      class="btn"
      ng-class="{ 'btn-default': !ctrl.isYearSelected(year), 'btn-primary': ctrl.isYearSelected(year) }"
      ng-click="ctrl.selectYear(year)">
      {{ year }}
    </button>
  </div>
</div>
<div class="text-center">
  <div class="btn-group" role="group">
    <button ng-repeat="state in ctrl.states"
      class="btn"
      ng-class="{ 'btn-default': !ctrl.isStateSelected(state), 'btn-primary': ctrl.isStateSelected(state) }"
      ng-click="ctrl.selectState(state)">
      {{ state.name }}
    </button>
  </div>
</div>

<br>

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

    <div class="col-sm-6 col-lg-4" ng-repeat-start="recall in ctrl.recallsByState[ctrl.criteria.state].recalls">
      <div class="card">
          <div>
            <h5>{{ recall.product_type }}: {{ recall.event_id }}</h5>
            <h4>
              {{ recall.recalling_firm }}
              ({{ recall.city }}, {{ recall.state }} {{ recall.country }})
              <span class="label label-{{ ctrl.getClassificationStyle(recall.classification) }}" tooltip-html-unsafe="{{ ctrl.getClassificationDescription(recall.classification) }}">{{ recall.classification }}</span>
              <span class="label label-{{ ctrl.getStatusStyle(recall.status) }}" tooltip-html-unsafe="{{ ctrl.getStatusDescription(recall.status) }}">{{ recall.status }}</span>
            </h4>
          </div>

          <div>
            <h4>Reason</h4>
            <div>{{ recall.reason_for_recall }}</div>
          </div>

          <div>
            <h4>Product</h4>
            <div>{{ recall.product_description }}</div>
            <div>{{ recall.product_quantity }}</div>
            <div>{{ recall.code_info }}</div>
          </div>

          <div>
            <h4>Distribution</h4>
            <div>{{ recall.distribution_pattern }}</div>
          </div>

          <div>
            <h4>Recall Date and Notification</h4>
            <div>{{ recall.recall_initiation_date }}</div>
            <div>{{ recall.voluntary_mandated }}</div>
            <div>{{ recall.report_date }}: {{ recall.initial_firm_notification }}</div>
          </div>
        </div>

    </div>

    <!-- Add the extra clearfix for only the required viewport -->
    <div ng-if="$index % 3 === 2" class="clearfix visible-lg-block"></div>
    <div ng-repeat-end ng-if="$index % 2 === 1" class="clearfix visible-sm-block"></div>


  </div>
</div>

{'fraction_non_alphanumeric': 0.188646288209607, 'fraction_numerical': 0.0055895196506550214, 'mean_word_length': 2.534567901234568, 'pattern_counts': {'":': 0, '<': 146, '<?xml version=': 0, '>': 146, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3802914', 'n_tokens_mistral': 1882, 'n_tokens_neox': 1805, 'n_words': 323}