<section class="holosuite-vending-browser">
  <header class="holosuite-vending-toolbar">
    <div>
      <p class="holosuite-vending-kicker">Scene Access</p>
      <h2>{{sceneName}}</h2>
      {{#if actorName}}<span>Buyer: {{actorName}}</span>{{else}}<span>No actor selected or assigned</span>{{/if}}
    </div>
  </header>

  <div class="holosuite-vending-machine-list">
    {{#each machines}}
      <article class="holosuite-vending-machine-row" data-machine-state="{{state}}">
        <img src="{{image}}" alt="" />
        <div>
          <h3>{{name}}</h3>
          <p>{{description}}</p>
          <span>{{availableProducts}}/{{inventoryCount}} products available · {{totalStock}} units · {{linkLabel}}</span>
          {{#if offline}}<small>This machine is offline and cannot be opened.</small>{{/if}}
        </div>
        <menu>
          <button type="button" data-action="open-machine" data-machine-id="{{machineId}}" data-region-id="{{regionId}}" data-token-id="{{tokenId}}" {{#if offline}}disabled title="This machine is offline"{{/if}}><i class="fas fa-store"></i> Open</button>
        </menu>
      </article>
    {{else}}
      <p class="holosuite-vending-empty">No vending machines are currently accessible on this scene.</p>
    {{/each}}
  </div>
</section>
