<axis-card class="size-xsmall">
        <axis-card-heading>
          <axis-card-heading-body>
            <h3>Status at a glance</h3>
          </axis-card-heading-body>
          <axis-card-heading-right>
            <axis-dropdown
              [dataProvider]="chartType"
              id="idDropdownChartType"
              [ngModel]="chartType[0]"
              (onSelect)="showSelection($event)"
              kind="link"
              [align]="'right'"
            ></axis-dropdown>
          </axis-card-heading-right>
        </axis-card-heading>
        <div class="axis-grid separator _equal-col">
          <div class="axis-col-md-auto">
            <axis-card-body>
              <axis-media>
                <axis-media-left>
                  <h2 class="axis-h4">Summary</h2>
                </axis-media-left>
                <axis-media-body>
                  <span
                    aria-label="Summary"
                    axis-tooltip
                    content="Combines Issuance and Payment for Policies only"
                  >
                    <axis-icon
                      font="custom"
                      icon="information"
                    ></axis-icon>
                  </span>
                </axis-media-body>
              </axis-media>
              @if (!isTypePremium) {
                <div class="_text-small">
                  <axis-chart-donut
                    [center]="chartSummaryDataCenter"
                    [data]="chartSummaryData"
                    [options]="chartSummaryOptions"
                  ></axis-chart-donut>
                </div>
              }
              @if (isTypePremium) {
                <div class="_text-small">
                  <axis-chart-donut
                    [center]="chartSummaryDataCenterPremium"
                    [data]="chartSummaryDataPremium"
                    [options]="chartSummaryOptionsPremium"
                  ></axis-chart-donut>
                </div>
              }
            </axis-card-body>
            <axis-card-footer class="border-condensed">
              <ul class="axis-list-inline _text-small">
                <li>
                  <span class="axis-badge kind-symbol _bg-primary"></span
                  ><span
                    i18n="Legend area Label for chart chart@@legendChart"
                    class="axis-badge-text"
                  >
                    In Progress</span
                  >
                </li>
                <li>
                  <span class="axis-badge kind-symbol _bg-success"></span
                  ><span
                    i18n="Legend area Label for chart chart@@legendChart"
                    class="axis-badge-text"
                  >
                    Complete</span
                  >
                </li>
              </ul>
            </axis-card-footer>
          </div>
          <div class="axis-col-md">
            <axis-card-body>
              <axis-media>
                <axis-media-left>
                  <h2 class="axis-h4">Issuance</h2>
                </axis-media-left>
                <axis-media-body>
                  <span
                    aria-label="Issuance"
                    axis-tooltip
                    content="Includes all Policies and Endorsements"
                  >
                    <axis-icon
                      font="custom"
                      icon="information"
                    ></axis-icon>
                  </span>
                </axis-media-body>
              </axis-media>
              <div class="axis-grid _text-center">
                <div class="axis-col-sm">
                  @if (!isTypePremium) {
                    <div class="_text-small">
                      <axis-chart-donut
                        [center]="chartIssuancePolicyDataCenter"
                        [data]="chartIssuancePolicyData"
                        [options]="chartIssuancePolicyOptions"
                      ></axis-chart-donut>
                    </div>
                  }
                  @if (isTypePremium) {
                    <div class="_text-small">
                      <axis-chart-donut
                        [center]="chartIssuancePolicyDataCenterPremium"
                        [data]="chartIssuancePolicyDataPremium"
                        [options]="chartIssuancePolicyOptionsPremium"
                      ></axis-chart-donut>
                    </div>
                  }
                  <small class="_text-xsmall">Policies</small>
                </div>
                <div class="axis-col-sm-6">
                  @if (!isTypePremium) {
                    <div class="_text-small">
                      <axis-chart-donut
                        [center]="chartIssuanceEndDataCenter"
                        [data]="chartIssuanceEndData"
                        [options]="chartIssuanceEndOptions"
                      ></axis-chart-donut>
                    </div>
                  }
                  @if (isTypePremium) {
                    <div class="_text-small">
                      <axis-chart-donut
                        [center]="chartIssuanceEndDataCenterPremium"
                        [data]="chartIssuanceEndDataPremium"
                        [options]="chartIssuanceEndOptionsPremium"
                      ></axis-chart-donut>
                    </div>
                  }
                  <small class="_text-xsmall">Endorsements</small>
                </div>
              </div>
            </axis-card-body>
            <axis-card-footer class="border-condensed">
              <ul class="axis-list-inline _text-small custom-chart-legend">
                <li>
                  <span class="axis-badge kind-symbol _bg-info"></span
                  ><span
                    i18n="Legend area Label for chart chart@@legendChart"
                    class="axis-badge-text"
                  >
                    Under Global AIG Review</span
                  >
                </li>
                <li>
                  <span class="axis-badge kind-symbol _bg-cyan"></span
                  ><span
                    i18n="Legend area Label for chart chart@@legendChart"
                    class="axis-badge-text"
                  >
                    Under Local Review</span
                  >
                </li>
                <li>
                  <span class="axis-badge kind-symbol _bg-warning"></span
                  ><span
                    i18n="Legend area Label for chart chart@@legendChart"
                    class="axis-badge-text"
                  >
                    Pending Local Client/Broker</span
                  >
                </li>

                <li>
                  <span class="axis-badge kind-symbol _bg-success"></span
                  ><span
                    i18n="Legend area Label for chart chart@@legendChart"
                    class="axis-badge-text"
                  >
                    Issued</span
                  >
                </li>
              </ul>
            </axis-card-footer>
          </div>
          <div class="axis-col-md">
            <axis-card-body>
              <axis-media>
                <axis-media-left>
                  <h2 class="axis-h4">Payment</h2>
                </axis-media-left>
                <axis-media-body>
                  <span
                    aria-label="Payment"
                    axis-tooltip
                    content="Policies and Endorsements with Financial impact only"
                  >
                    <axis-icon
                      font="custom"
                      icon="information"
                    ></axis-icon>
                  </span>
                </axis-media-body>
              </axis-media>
              <div class="axis-grid _text-center">
                <div class="axis-col-sm">
                  @if (!isTypePremium) {
                    <div class="_text-small">
                      <axis-chart-donut
                        [center]="chartPaymentPolicyDataCenter"
                        [data]="chartPaymentPolicyData"
                        [options]="chartPaymentPolicyOptions"
                      ></axis-chart-donut>
                    </div>
                  }
                  @if (isTypePremium) {
                    <div class="_text-small">
                      <axis-chart-donut
                        [center]="chartPaymentPolicyDataCenterPremium"
                        [data]="chartPaymentPolicyDataPremium"
                        [options]="chartPaymentPolicyOptionsPremium"
                      ></axis-chart-donut>
                    </div>
                  }
                  <small class="_text-xsmall">Policies</small>
                </div>
                <div class="axis-col-sm-6">
                  @if (!isTypePremium) {
                    <div class="_text-small">
                      <axis-chart-donut
                        [center]="chartPaymentEndDataCenter"
                        [data]="chartPaymentEndData"
                        [options]="chartPaymentEndOptions"
                      ></axis-chart-donut>
                    </div>
                  }
                  @if (isTypePremium) {
                    <div class="_text-small">
                      <axis-chart-donut
                        [center]="chartPaymentEndDataCenterPremium"
                        [data]="chartPaymentEndDataPremium"
                        [options]="chartPaymentEndOptionsPremium"
                      ></axis-chart-donut>
                    </div>
                  }
                  <small class="_text-xsmall">Endorsements</small>
                </div>
              </div>
            </axis-card-body>
            <axis-card-footer class="border-condensed">
              <ul class="axis-list-inline _text-small">
                <li>
                  <span class="axis-badge kind-symbol _bg-cyan-dark"></span
                  ><span
                    i18n="Legend area Label for chart chart@@legendChart"
                    class="axis-badge-text"
                  >
                    Not Invoiced</span
                  >
                </li>
                <li>
                  <span class="axis-badge kind-symbol _bg-warning"></span>
                  <span
                    i18n="Legend area Label for chart chart@@legendChart"
                    class="axis-badge-text"
                  >
                    Invoiced Unpaid</span
                  >
                </li>
                <li>
                  <span class="axis-badge kind-symbol _bg-success"></span
                  ><span
                    i18n="Legend area Label for chart chart@@legendChart"
                    class="axis-badge-text"
                  >
                    Paid</span
                  >
                </li>
              </ul>
            </axis-card-footer>
          </div>
        </div>
      </axis-card>




]<axis-card class="size-xsmall">
      <axis-card-heading>
        <axis-card-heading-body>
          <h3 i18n="@@customer.summary.statusAtGlanceHeading">Status at a glance</h3>
        </axis-card-heading-body>
        <axis-card-heading-right>
          <axis-dropdown
            [align]="'right'"
            [dataProvider]="chartType"
            [ngModel]="chartType[0]"
            id="idDropdownChartType"
            kind="link"
            (onSelect)="showSelection($event)"
          ></axis-dropdown>
        </axis-card-heading-right>
      </axis-card-heading>
      <div class="axis-grid separator gutter-none _equal-col">
        <div class="axis-col-md-auto">
          <axis-card-body>
            <axis-media>
              <axis-media-left>
                <h2
                  class="axis-h4"
                  i18n="@@customer.summary.summaryHeading"
                >
                  Summary
                </h2>
              </axis-media-left>
              <axis-media-body>
                <span
                  aria-label="Summary"
                  axis-tooltip
                  content="Combines Issuance and Payment for Policies only"
                >
                  <axis-icon
                    font="custom"
                    icon="information"
                  ></axis-icon>
                </span>
              </axis-media-body>
            </axis-media>
            @if (!isTypePremium) {
              <div class="_text-small">
                <axis-chart-donut
                  [center]="chartSummaryDataCenter"
                  [data]="chartSummaryData"
                  [options]="chartSummaryOptions"
                ></axis-chart-donut>
              </div>
            }
            @if (isTypePremium) {
              <div class="_text-small">
                <axis-chart-donut
                  [center]="chartSummaryDataCenterPremium"
                  [data]="chartSummaryDataPremium"
                  [options]="chartSummaryOptionsPremium"
                ></axis-chart-donut>
              </div>
            }
          </axis-card-body>
          <axis-card-footer class="border-condensed">
            <ul class="axis-list-inline _text-small">
              <li>
                <span class="axis-badge kind-symbol _bg-primary"></span
                ><span
                  i18n="@@customer.summary.chart.inProgressLegend"
                  class="axis-badge-text"
                >
                  In Progress</span
                >
              </li>
              <li>
                <span class="axis-badge kind-symbol _bg-success"></span
                ><span
                  class="axis-badge-text"
                  i18n="@@customer.summary.chart.completeLegend"
                >
                  Complete</span
                >
              </li>
            </ul>
          </axis-card-footer>
        </div>
        <div class="axis-col-md">
          <axis-card-body>
            <axis-media>
              <axis-media-left>
                <h2
                  class="axis-h4"
                  i18n="@@customer.summary.chart.issuanceHeading"
                >
                  Issuance
                </h2>
              </axis-media-left>
              <axis-media-body>
                <span
                  aria-label="Issuance"
                  axis-tooltip
                  content="Includes all Policies and Endorsements"
                >
                  <axis-icon
                    font="custom"
                    icon="information"
                  ></axis-icon>
                </span>
              </axis-media-body>
            </axis-media>
            <div class="axis-grid _text-center gutter-xsmall">
              <div class="axis-col-sm axis-col-sm-6">
                @if (!isTypePremium) {
                  <div class="_text-small">
                    <axis-chart-donut
                      [center]="chartIssuancePolicyDataCenter"
                      [data]="chartIssuancePolicyData"
                      [options]="chartIssuancePolicyOptions"
                    ></axis-chart-donut>
                  </div>
                }
                @if (isTypePremium) {
                  <div class="_text-small">
                    <axis-chart-donut
                      [center]="chartIssuancePolicyDataCenterPremium"
                      [data]="chartIssuancePolicyDataPremium"
                      [options]="chartIssuancePolicyOptionsPremium"
                    ></axis-chart-donut>
                  </div>
                }
                <small
                  class="_text-xsmall"
                  i18n="@@customer.summary.issuanceChart.policiesText"
                  >Policies</small
                >
              </div>
              <div class="axis-col-sm-6">
                @if (!isTypePremium) {
                  <div class="_text-small">
                    <axis-chart-donut
                      [center]="chartIssuanceEndDataCenter"
                      [data]="chartIssuanceEndData"
                      [options]="chartIssuanceEndOptions"
                    ></axis-chart-donut>
                  </div>
                }
                @if (isTypePremium) {
                  <div class="_text-small">
                    <axis-chart-donut
                      [center]="chartIssuanceEndDataCenterPremium"
                      [data]="chartIssuanceEndDataPremium"
                      [options]="chartIssuanceEndOptionsPremium"
                    ></axis-chart-donut>
                  </div>
                }
                <small
                  class="_text-xsmall"
                  i18n="@@customer.summary.issuanceChart.endorsementsText"
                  >Endorsements</small
                >
              </div>
            </div>
          </axis-card-body>
          <axis-card-footer class="border-condensed">
            <ul class="axis-list-inline _text-small">
              <li>
                <span class="axis-badge kind-symbol _bg-info"></span
                ><span
                  class="axis-badge-text"
                  i18n="@@customer.summary.chart.underGlobalAIGReviewLegend"
                >
                  Under Global AIG Review</span
                >
              </li>
              <li>
                <span class="axis-badge kind-symbol _bg-cyan"></span
                ><span
                  class="axis-badge-text"
                  i18n="@@customer.summary.chart.underLocalReviewLegend"
                >
                  Under Local Review</span
                >
              </li>
              <li>
                <span class="axis-badge kind-symbol _bg-warning"></span
                ><span
                  class="axis-badge-text"
                  i18n="@@customer.summary.chart.pendingLocalClientLegend"
                >
                  Pending Local Client/Broker</span
                >
              </li>

              <li>
                <span class="axis-badge kind-symbol _bg-success"></span
                ><span
                  class="axis-badge-text"
                  i18n="@@customer.summary.chart.issuedLegend"
                >
                  Issued</span
                >
              </li>
            </ul>
          </axis-card-footer>
        </div>
        <div class="axis-col-md">
          <axis-card-body>
            <axis-media>
              <axis-media-left>
                <h2
                  class="axis-h4"
                  i18n="@@customer.summary.chart.paymentHeading"
                >
                  Payment
                </h2>
              </axis-media-left>
              <axis-media-body>
                <span
                  aria-label="Payment"
                  axis-tooltip
                  content="Policies and Endorsements with Financial impact only"
                >
                  <axis-icon
                    font="custom"
                    icon="information"
                  ></axis-icon>
                </span>
              </axis-media-body>
            </axis-media>
            <div class="axis-grid _text-center gutter-xsmall">
              <div class="axis-col-sm axis-col-sm-6">
                @if (!isTypePremium) {
                  <div class="_text-small">
                    <axis-chart-donut
                      [center]="chartPaymentPolicyDataCenter"
                      [data]="chartPaymentPolicyData"
                      [options]="chartPaymentPolicyOptions"
                    ></axis-chart-donut>
                  </div>
                }
                @if (isTypePremium) {
                  <div class="_text-small">
                    <axis-chart-donut
                      [center]="chartPaymentPolicyDataCenterPremium"
                      [data]="chartPaymentPolicyDataPremium"
                      [options]="chartPaymentPolicyOptionsPremium"
                    ></axis-chart-donut>
                  </div>
                }
                <small
                  class="_text-xsmall"
                  i18n="@@customer.summary.paymentChart.policiesText"
                  >Policies</small
                >
              </div>
              <div class="axis-col-sm-6">
                @if (!isTypePremium) {
                  <div class="_text-small">
                    <axis-chart-donut
                      [center]="chartPaymentEndDataCenter"
                      [data]="chartPaymentEndData"
                      [options]="chartPaymentEndOptions"
                    ></axis-chart-donut>
                  </div>
                }
                @if (isTypePremium) {
                  <div class="_text-small">
                    <axis-chart-donut
                      [center]="chartPaymentEndDataCenterPremium"
                      [data]="chartPaymentEndDataPremium"
                      [options]="chartPaymentEndOptionsPremium"
                    ></axis-chart-donut>
                  </div>
                }
                <small
                  class="_text-xsmall"
                  i18n="@@customer.summary.paymentChart.endorsementsText"
                  >Endorsements</small
                >
              </div>
            </div>
          </axis-card-body>
          <axis-card-footer class="border-condensed">
            <ul class="axis-list-inline _text-small">
              <li>
                <span class="axis-badge kind-symbol _bg-cyan-dark"></span
                ><span
                  class="axis-badge-text"
                  i18n="@@customer.summary.chart.notInvoicedLegend"
                >
                  Not Invoiced</span
                >
              </li>
              <li>
                <span class="axis-badge kind-symbol _bg-warning"></span>
                <span
                  class="axis-badge-text"
                  i18n="@@customer.summary.chart.invoicedUnpaidLegend"
                >
                  Invoiced Unpaid</span
                >
              </li>
              <li>
                <span class="axis-badge kind-symbol _bg-success"></span
                ><span
                  class="axis-badge-text"
                  i18n="@@customer.summary.chart.paidLegend"
                >
                  Paid</span
                >
              </li>
            </ul>
          </axis-card-footer>
        </div>
      </div>
    </axis-card>


can you compare both html and create a nice resuable component using best practices and that should be very scalable in the future