<li
  class="{{if this.isOverridden "mixin-property-state-overridden line-through"}} mixin-property flex flex-row relative items-center truncate"
  data-test-object-property
>
  {{!-- Disclosure Triangle --}}
  {{#if this.hasDependentKeys}}
    <button
      class="mixin-cp-toggle {{if this.showDependentKeys "mixin-cp-toggle-expanded"}}"
      {{on "click" this.toggleDeps}}
      type="button"
    >
      {{svg-jar
        "disclosure-triangle"
        title="Toggle dependent keys"
        width="9px"
        height="9px"
      }}
    </button>
  {{else}}
    <span class="pad"></span>
  {{/if}}

  {{!-- Property Icon --}}
  <span
    class="mixin-property-icon-container flex-shrink-0"
    role="button"
    title={{if @model.code @model.code this.iconInfo.title}}
    {{on "click" this.toggleDeps}}
  >
    <span class="mixin-property-icon mixin-property-icon-{{this.iconInfo.type}} inline-block rounded font-mono text-md text-white text-center select-none"></span>
  </span>

  {{#unless this.isOwner}}
    {{!-- Property Name --}}
    <span
      class="mixin-property-name text-base14 truncate"
      data-test-object-property-name
    >
      {{#if this.isService}}
        <span
          title="service"
          class="mixin-property--group"
          data-test-property-name-service
        >
          {{@model.name}}
        </span>
      {{else}}
        {{#if this.hasDependentKeys}}
          <span
            title="computed"
            class="mixin-property--group"
          >
            {{@model.name}}
          </span>
        {{else}}
          {{@model.name}}
        {{/if}}
      {{/if}}
    </span>

    <span class="mr-1">: </span>
  {{/unless}}

  {{#if this.isEdit}}
    {{#if this.isDate}}
      <DatePropertyField
        class="mixin-property-value-txt flex-1 text-base14 outline-none text-base bg-base01 js-object-property-value-date"
        @allowInput={{true}}
        @date={{readonly this.dateValue}}
        @dateFormat="Y-m-d"
        @onChange={{this.dateSelected}}
        @onClose={{this.finishedEditing}}
      />
    {{else}}
      <ObjectInspector::PropertyField
        class="mixin-property-value-txt flex-1 text-base14 text-base bg-base01 outline-none"
        @value={{this.txtValue}}
        @insert-newline={{this.save}}
        @escape-press={{this.finishedEditing}}
        @focus-out={{this.finishedEditing}}
        data-test-object-property-value-txt
      />
    {{/if}}
  {{else}}
    {{#if this.canCalculate}}
      <button
        data-test-calculate
        class="mixin-calc-btn"
        title="compute property"
        type="button"
        {{on "click" (stop-propagation @calculate)}}
      >
        {{svg-jar "calculate" width="16px" height="16px"}}
      </button>
    {{/if}}
    {{#if this.isDate}}
      <span
        class="{{@model.value.type}} mixin-property-value truncate"
        role="button"
        {{on "click" this.dateClick}}
        data-test-object-property-value
      >
        {{@model.value.inspect}}
      </span>
    {{else}}
      <span
        class="{{@model.value.type}} {{if this.isService "type-service"}} mixin-property-value truncate"
        role="button"
        {{on "click" this.valueClick}}
        data-test-object-property-value
      >
        {{@model.value.inspect}}
      </span>
    {{/if}}
  {{/if}}

  <span class="mixin-property-overridden-by absolute right-0 no-underline bg-spec00">
    (Overridden by {{@model.overridden}})
  </span>

  <button
    data-test-send-to-console-btn
    class="mixin-send-btn flex-shrink-0 send-to-console"
    title="Send To Console"
    type="button"
    {{on "click" @sendToConsole}}
  >
    {{svg-jar "send-with-text" width="20px" height="10px"}}
  </button>
  {{#if this.isFunction}}
    <button
      data-test-goto-source-btn
      class="mixin-send-btn flex-shrink-0 goto-source"
      title="Goto Source"
      type="button"
      {{on "click" @gotoSource}}
    >
      {{svg-jar "code-source" width="20px" height="10px"}}
    </button>
  {{/if}}
</li>

{{#if this.showDependentKeys}}
  <ObjectInspector::DependentKeys @keys={{@model.dependentKeys}} />
{{/if}}

