<ObjectInspector::Accordion @mixin={{this.accordionMixin}} as |accordion|>
  <div
    class="mixin {{this.accordionMixin.type}} {{if accordion.isExpanded "mixin-state-expanded"}} {{if this.accordionMixin.properties.length "mixin-props-yes" "mixin-props-no"}}"
    data-test-object-detail
  >
    {{#if this.accordionMixin.properties.length}}
      <h2
        data-test-object-detail-name
        class="mixin-name sticky top-0 truncate select-none cursor-default text-base15 bg-base01"
        role="button"
        {{on "click" accordion.toggle}}
      >
        {{this.accordionMixin.name}}
      </h2>
    {{else}}
      <h2
        class="mixin-name mixin-name--no-props sticky top-0 truncate select-none text-base09 cursor-default bg-base01"
        data-test-object-detail-name
      >
        {{this.accordionMixin.name}}
      </h2>
    {{/if}}
    {{#if accordion.isExpanded}}
      <ul class="mixin-properties m-0 text-base font-mono list-none">
      {{#each this.parents as |parent|}}
        <ComponentTreeItem @item={{parent}}  />
      {{else}}
          <li class="mixin-property flex relative flex-row items-center truncate">No Properties</li>
      {{/each}}
      </ul>
    {{/if}}
  </div>
</ObjectInspector::Accordion>
