<!--
/**
 *
 * @title Partial for Section "Color"
 *
 */
-->
<section id="{{toID title}}" class="sugar-section sugar-section-color">
  <div class="sugar-section-wrapper">
  <h2 class="sugar-h2"><a href="#{{toID title}}">{{ title }}</a></h2>
    {{#each files as |file| }}
      <div class="sugar-component">
        {{#each data }}
          <div id="{{toID file.path @index}}">
            {{> block-title data=this}}
            <div class="sugar-colors">
            {{#each serializedCode }}
              <div class="sugar-color {{#if comment}}sugar-color-commented{{/if}}">
                <div class="sugar-color-swatch" style="background-color: {{value}}">
                </div>
                <div class="sugar-color-var">
                  {{ variable }}
                </div>
                <div class="sugar-color-val">
                  {{ value }}
                </div>
                {{#if comment}}
                  <a class="sugar-btn-accordion sugar-accordion-small">Toggle</a>
                  <div class="sugar-color-comment">
                    {{ comment }}
                  </div>
                {{/if}}
              </div>
            {{/each }}
            </div>
          </div>
        {{/each }}

        <p class="sugar-file sugar-p">File: <span class="sugar-path">{{ path }}</span></p>

      </div>
    {{/each }}
  </div>
</section>