{{! template-lint-disable no-inline-styles style-concatenation }}

<div class="field-guide-color-pallet" data-test-field-guide-color-pallet ...attributes>
  <div class="color-pallet__example" style="background-color: {{@color}}">

    {{#each this.textColorClasses as |textColorClass|}}
      <div class="color-pallet__example-text-row">
        {{#each this.textClasses as |textClass|}}
          <ColorPalletResult @rgb={{this.rgb}} @className={{textClass}} class={{textColorClass}}/>
        {{/each}}
      </div>
    {{/each}}
  </div>
  <div class="color-pallet__details">
    {{#if @name}}
      <dl>
        <dt class="color-pallet__details-title">Name</dt>
        <dd>{{@name}}</dd>
      </dl>
    {{/if}}

    {{#if @variable}}
      <dl>
        <dt class="color-pallet__details-title">Variable</dt>
        <dd>{{@variable}}</dd>
      </dl>
    {{/if}}

    {{#if @class-name}}
      <dl>
        <dt class="color-pallet__details-title">Class Name</dt>
        {{!-- template-lint-disable  --}}
        <dd>{{@class-name}}</dd>
        {{!-- template-lint-enable  --}}
      </dl>
    {{/if}}

    <dl>
      <dt class="color-pallet__details-title">RGB</dt>
      <dd>{{this.rgbString}}</dd>
    </dl>

    <dl>
      <dt class="color-pallet__details-title">HEX</dt>
      <dd>{{@color}}</dd>
    </dl>

  </div>
</div>