{%- assign machine_id = include.id -%}
{%- assign machine_type = include.type -%}
{%- assign machine_config = include.config -%}
{%- assign machine_layout = include.layout -%}
{%- capture machine_name -%}{{ include.name | default: "PCjs Machine" }}{%- endcapture -%}
{%- assign machine_errors = "" -%}
{%- assign machine_does_not_exist = true -%}
{%- for candidate in page.machines -%}
  {%- if candidate.id == machine_id -%}
    {%- assign machine = candidate -%}
    {%- if candidate.type -%}{%- assign machine_type = candidate.type -%}{%- endif -%}
    {%- if candidate.config -%}{%- assign machine_config = candidate.config -%}{%- endif -%}
    {%- if candidate.layout -%}{%- assign machine_layout = candidate.layout | replace: "/_includes/", "" | replace: ".html", "" -%}{%- endif -%}
    {%- if candidate.debugger -%}{%- assign machine_debugger = candidate.debugger -%}{%- endif -%}
    {%- assign machine_does_not_exist = false -%}
    {%- break -%}
  {%- endif -%}
{%- endfor -%}
{%- if machine_config -%}
  {%- if machine_config contains ".xml" %}
<div id="{{ machine_id }}" class="machine-placeholder">
  <p>[{{ machine_name }} "{{ machine_id }}"]</p>
  <p class="machine-warning">Waiting for machine "{{machine_id }}" to load....</p>
</div>
    {%- assign machine = nil -%}
    {%- assign machine_does_not_exist = false -%}
    {%- comment -%}Machines that use XML files have their layouts built at page load time, using XSL files, so we're done here.{%- endcomment -%}
  {%- elsif machine_layout -%}
    {%- include {{ machine_layout }}.html id=machine_id -%}
    {%- assign machine = nil -%}
    {%- assign machine_does_not_exist = false -%}
    {%- comment -%}Machines that explicitly include an HTML layout file do not need any additional layout work performed below.{%- endcomment -%}
  {%- elsif machine_config contains "/machines/" -%}
    {%- assign machine_data = site.data -%}
    {%- assign machine_paths = machine_config | replace: "/machines/", "" | replace: ".json", "" | split: "/" -%}
    {%- for machine_path in machine_paths -%}{%- assign machine_data = machine_data[machine_path] -%}{%- endfor -%}
    {%- assign machine = machine_data -%}
    {%- assign machine_data = machine.machine -%}
    {%- comment -%}Any JSON configuration file in the /machines folder should be accessible through site.data, driving layout generation below.{%- endcomment -%}
    {%- unless machine %}
      {%- capture machine_errors %}{{ machine_errors }}
<p class="machine-error">Missing machine configuration file: {{ machine_config }}</p>
      {%- endcapture -%}
    {%- endunless -%}
  {%- else -%}
    {%- assign machine = nil -%}
    {%- comment -%}The assumption here is that the page has defined its own layout, styles, and config file, so there's nothing more we need do here.{%- endcomment -%}
  {%- endif -%}
{%- elsif machine -%}
  {%- unless machine.components -%}
    {%- assign machine_group = site.data.machines[machine_type].folder | split: '/' -%}
    {%- unless machine_group[1] %}
      {%- assign machine = site.data[machine_type][machine_id] -%}
    {%- else %}
      {%- assign machine_group = machine_group[0] -%}
      {%- assign machine = site.data[machine_group][machine_type][machine_id] -%}
    {%- endunless %}
    {%- unless machine -%}
      {%- capture machine_errors %}{{ machine_errors }}
<p class="machine-error">Missing machine configuration for {{ machine_id }}</p>
      {%- endcapture -%}
    {%- endunless -%}
  {%- endunless -%}
{%- endif -%}
{%- if machine -%}
  {%- unless machine_data -%}
    {%- assign machine_data = site.data.machines[machine_type] -%}
  {%- endunless -%}
  {%- if machine_name == "PCjs Machine" -%}
    {%- if machine.name -%}
      {%- assign machine_name = machine.name -%}
    {%- elsif machine_type -%}
      {%- capture machine_name -%}{{ machine_type | upcase | replace:"X86","x86" }} Machine{%- endcapture -%}
    {%- endif -%}
  {%- endif -%}
  {%- assign machine_style = "" -%}
  {%- if machine.style -%}
    {%- capture machine_style -%}
      {%- for style in machine.style -%}{{ style[0] }}:{{style[1]}};{%- endfor -%}
    {%- endcapture -%}
  {%- endif -%}
  {%- assign machine_parms = "" -%}
  {%- if machine.parms -%}
    {%- capture machine_parms %} data-value="{ {% for prop in machine.parms %}{{ prop[0] }}:'{{ prop[1] }}',{% endfor %}@ }"{%- endcapture -%}
  {%- endif %}
<div class="machine {{ machine_type }} {{ machine_data.class }}" id="{{ machine_id }}">
  <div id="{{ machine_id }}.machine" class="pcjs-machine {{ machine_type }}-machine {{ machine_type }}-component"{{ machine_parms | replace: ",@", "" }}>
    {%- if machine_name != page.title %}
    <h3>{{ machine_name }}</h3>
    {%- endif %}
    <div class="pcjs-chassis"{% if machine_style != "" %} style="{{ machine_style }}"{% endif %}>
  {%- for machine_component in machine.components -%}
    {%- assign config = nil -%}
    {%- comment -%}A machine_component with no "config" AND no "id" is assumed to simply be a string, containing the path to a config file.{%- endcomment -%}
    {%- if machine_component.config -%}{%- assign config = machine_component.config -%}{%- elsif machine_component.id == nil -%}{%- assign config = machine_component -%}{%- endif -%}
    {%- if config -%}
      {%- assign config_data = site.data -%}
      {%- assign config_paths = config | replace: "/machines/", "" | replace: ".json", "" | split: "/" -%}
      {%- for config_path in config_paths -%}{%- assign config_data = config_data[config_path] -%}{%- endfor -%}
      {%- assign component = config_data -%}
      {%- unless component and machine_component.class == nil or component.class == machine_component.class %}
        {%- capture machine_errors %}{{ machine_errors }}
<p class="machine-error">Missing or invalid component configuration file: {{ config }}</p>
        {%- endcapture -%}
        {%- continue -%}
      {%- endunless -%}
    {%- else -%}
      {%- assign component = machine_component -%}
    {%- endif -%}
    {%- assign component_id = machine_component.id | default: component.id %}
    {%- assign component_config = "" %}
    {%- assign component_make = component.make | default: machine.make %}
    {%- assign component_model = component.model | default: machine.model %}
    {%- if site.developer %}
      <!-- component {{ component_id }} make: '{{ component_make }}', model: '{{ component_model }}' -->
    {%- endif %}
    {%- assign component_title = "" %}
    {%- assign component_class = "" %}
    {%- assign component_style = "" %}
    {%- assign component_controls = "" %}
    {%- assign component_elements = "" %}
    {%- capture default_config -%}id:'{{ machine_id }}.{{ component_id }}',name:'{{ component.name }}'{%- endcapture -%}
    {%- if component.class == "computer" -%}
      {%- if component.modules -%}
        {%- capture module_config -%},modules:[{% for module in component.modules %}{ type:'{{ module.type }}',refID:'{{ module.id }}',start:{{ module.start }},end:{{ module.end }} },{% endfor %}@]{%- endcapture -%}
        {%- capture component_config -%}{ {{ default_config }}{{ module_config | replace: ",@", "" }} }{%- endcapture -%}
      {%- else -%}
        {%- capture component_config -%}{ {{ default_config }},autoPower:{{ component.autoPower | default: "true" }},busWidth:{{ component.busWidth | default: "0" }} }{%- endcapture -%}
      {%- endif -%}
    {%- elsif component.class == "chipset" -%}
      {%- capture component_config -%}{ {{ default_config }},model:'{{ component.model }}',scaleTimers:{{ component.scaleTimers | default: "false" }},sw1:'{{ machine_component.sw1 | default: component.sw1 }}',sw2:'{{ machine_component.sw2 | default: component.sw2 }}',sound:{{ component.sound | default: "true" }},floppies:{ {{ component.floppies }} },monitor:'{{ component.monitor }}',dateRTC:'{{ component.dateRTC }}' }{%- endcapture -%}
    {%- elsif component.class == "cpu" -%}
      {%- capture component_config -%}{ {{ default_config }},model:'{{ component.model }}',stepping:'{{ component.stepping }}',fpu:{{ component.fpu | default: "0" }},multiplier:{{ component.multiplier | default: "1" }},autoStart:{{ component.autoStart | default: "undefined" }},addrReset:{{ component.addrReset | default: "0" }} }{%- endcapture -%}
    {%- elsif component.class == "debugger" -%}
      {%- capture component_config -%}{ {{ default_config }},base:{{ component.base | default: "16" }},commands:'{{ component.commands }}',messages:'{{ component.messages }}' }{%- endcapture -%}
    {%- elsif component.class == "fdc" -%}
      {%- if component.autoMount -%}
        {%- capture component_autoMount -%}{%- for drive in component.autoMount -%}{{ drive[0] }}:{%- if drive[1].name -%}{name:&quot;{{ drive[1].name }}&quot;}{%- else -%}{path:&quot;{{ drive[1].path }}&quot;}{%- endif -%},{%- endfor -%}@{%- endcapture -%}
      {%- endif -%}
      {%- capture component_config -%}{ {{ default_config }},autoMount:'{ {{ component_autoMount | replace: ",@", "" }} }',diskettes:'{{ component.diskettes }}',server:'{{ component.server }}' }{%- endcapture -%}
    {%- elsif component.class == "hdc" -%}
      {%- capture component_drives -%}{%- for drive in component.drives -%}{ name:&quot;{{ drive.name }}&quot;,type:{{ drive.type | default: "3" }},path:&quot;{{ drive.path }}&quot; },{%- endfor -%}@{%- endcapture -%}
      {%- capture component_config -%}{ {{ default_config }},drives:'[{{ component_drives | replace: ",@", "" }}]',type:'{{ component.type | default: "XT" }}',server:'{{ component.server }}' }{%- endcapture -%}
    {%- elsif component.class == "keyboard" -%}
      {%- capture component_config -%}{ {{ default_config }},model:'{{ component.model }}' }{%- endcapture -%}
    {%- elsif component.class == "mouse" -%}
      {%- capture component_config -%}{ {{ default_config }},adapter:{{ component.adapter | default: "0" }},binding:'{{ component.binding }}',type:'{{ component.type }}',scaleMouse:{{ component.scaleMouse | default: "0.5" }},serial:'{{ component.serial }}'}{%- endcapture -%}
    {%- elsif component.class == "panel" -%}
      {%- capture component_config -%}{ {{ default_config }} }{%- endcapture -%}
    {%- elsif component.class == "parallel" -%}
      {%- capture component_config -%}{ {{ default_config }},adapter:{{ component.adapter | default: "0" }},binding:'{{ component.binding }}'}{%- endcapture -%}
    {%- elsif component.class == "ram" -%}
      {%- capture component_config -%}{ {{ default_config }},addr:{{ component.addr | default: "0" }},size:{{ component['size'] | default: "0" }},file:'{{ component.file }}',load:{{ component.load | default: "null" }},exec:{{ component.exec | default: "null" }},test:{{ machine_component.test | default: component.test | default: "true" }} }{%- endcapture -%}
    {%- elsif component.class == "rom" -%}
      {%- capture component_config -%}{ {{ default_config }},addr:{{ component.addr | default: "0" }},size:{{ component['size'] | default: "0" }},file:'{{ component.file }}',alias:{{ component.alias | default: "null" }},notify:'{{ component.notify }}' }{%- endcapture -%}
    {%- elsif component.class == "serial" -%}
      {%- capture component_config -%}{ {{ default_config }},adapter:{{ component.adapter | default: "0" }},binding:'{{ component.binding }}',baudReceive:{{ component.baudReceive | default: "0" }},baudTransmit:{{ component.baudTransmit | default: "0" }},tabSize:{{ component.tabSize | default: "0" }},charBOL:{{ component.charBOL | default: "0" }},upperCase:{{ component.upperCase | default: "false" }} }{%- endcapture -%}
    {%- elsif component.class == "video" -%}
      {%- capture component_class %} pcjs-screen{%- endcapture -%}
      {%- capture component_config -%}{ {{ default_config }},model:'{{ machine_component.model | default: component.model }}',memory:'{{ machine_component.memory | default: component.memory }}',screenWidth:{{ component.screenWidth | default: "640" }},screenHeight:{{ component.screenHeight | default: "400" }},screenColor:'{{ component.screenColor }}',fontROM:'{{ component.fontROM }}',fontColor:'{{ component.fontColor }}',charCols:{{ component.charCols | default: 80 }},charRows:{{ component.charRows | default: 25 }},touchScreen:'{{ component.touchScreen }}',scale:{{ component.scale | default: false }},switches:'{{ component.switches }}',autoLock:{{ component.autoLock | default: false }},aspectRatio:{{ component.aspectRatio | default: 0 }},smoothing:{{ component.smoothing | default: "null" }},flicker:{{ component.flicker | default: 1.0 }} }{%- endcapture -%}
      {%- capture component_elements %}
          <canvas class="pcjs-canvas" width="{{ component.screenWidth }}" height="{{ component.screenHeight }}" style="height:auto;background-color:{{ component.screenColor }};opacity:1;"></canvas>
        {%- if component.overlay %}
          <textarea class="pcjs-overlay" style="line-height: normal;"></textarea>
        {%- endif %}
      {% endcapture -%}
    {%- endif -%}
    {%- if component_config -%}
      {%- assign component_style = "" -%}
      {%- if component.style -%}
        {%- capture component_style -%}
          {%- for style in component.style -%}{{ style[0] }}:{{style[1]}};{%- endfor -%}
        {%- endcapture -%}
      {%- endif -%}
      {%- if component.title -%}
        {%- capture component_title %}
        <div class="pcjs-title">{{ component.title }}</div>
        {%- endcapture -%}
      {%- endif -%}
      {%- assign machine_controls = machine_component.controls | default: component.controls -%}
      {%- if machine_controls and machine_controls != "none" -%}
        {%- capture component_controls -%}
          {%- assign control_group = "" -%}
          {%- for control in machine_controls -%}
            {%- assign control_class = "" -%}
            {%- assign control_style = "" -%}
            {%- assign control_make = control.make | default: component_make %}
            {%- assign control_model = control.model | default: component_model %}
            {%- if control.class -%}
              {%- capture control_class %} {{ control.class }}{%- endcapture -%}
            {%- endif -%}
            {%- if control.style -%}
              {%- capture control_style -%}
                {%- for style in control.style -%}{{ style[0] }}:{{style[1]}};{%- endfor -%}
              {%- endcapture -%}
            {%- endif %}
            {%- if control.type == "group" -%}
              {%- if control_group != "" -%}
        </div>
              {%- endif %}
        <div class="pcjs-group{{ control_class }}"{% if control_style != "" %} style="{{ control_style }}"{% endif %}>
              {%- capture control_group -%}{{ control.group }}.{{ control.id }}{%- endcapture -%}
              {%- continue -%}
            {%- endif %}
          <div class="pcjs-control {{ machine_type }}-control{{ control_class }}"{% if control.id %} id="{{ machine_id }}.{{ control.id }}"{% endif %}{% if control_style != "" %} style="{{ control_style }}"{% endif %}>
            {%- if control.title %}
            <div class="pcjs-control-title" style="text-align:right;">{{ control.title }}</div>
            {%- endif %}
            {%- if control.type == "button" %}
            <button class="{{ machine_type }}-binding pcjs-button" data-value="{type:'{{ control.type }}',binding:'{{ control.id }}',value:''}">{{ control.label }}</button>
            {%- elsif control.type == "description" -%}
              {%- unless control.id %}
            <div class="pcjs-description">{{ control.label }}</div>
              {%- else %}
            <div class="{{ machine_type }}-binding pcjs-description" data-value="{type:'{{ control.type }}',binding:'{{ control.id }}'}">{{ control.label }}</div>
              {%- endunless -%}
            {%- elsif control.type == "file" %}
            <form class="{{ machine_type }}-binding" data-value="{type:'{{ control.type }}',binding:'{{ control.id }}'}">
              <fieldset class="pcjs-fieldset">
                <input type="file"><input type="submit" value="{{ control.label }}" disabled="">
              </fieldset>
            </form>
            {%- elsif control.type == "keyboard" %}
              {%- assign keyboard_layout = site.data[machine_type][control_make].keyboard[control_model] %}
              {%- if site.developer %}
            <!-- control {{ control.id }} make: '{{ control_make }}', model: '{{ control_model }} -->
              {%- endif %}
              {%- for key in keyboard_layout %}
                {%- assign key_style = "" -%}{%- if key[1].height -%}{%- capture key_style %} style="height:{{ key[1].height }};"{%- endcapture -%}{%- endif %}
            <div class="{{ machine_type }}-control" style="position:relative;left:{{ key[1].left }};top:{{ key[1].top }};width:{{ key[1].width }};">
              <div class="{{ machine_type }}-binding pcjs-soft-key"{{ key_style}} data-value="{type:'key',binding:'{{ key[0] }}'}">{{ key[1].label }}</div>
            </div>
              {%- endfor -%}
            {%- elsif control.type == "led" %}
            <div class="{{ machine_type }}-binding pcjs-{{ control.type }}" data-value="{type:'{{ control.type }}',binding:'{{ control.id }}',value:''}"></div>
            <div style="clear:both"></div>
            {%- elsif control.type == "list" %}
            <select class="{{ machine_type }}-binding" data-value="{type:'{{ control.type }}',binding:'{{ control.id }}'}">
              {%- if control.options -%}
                {%- for option in control.options %}
              <option value="{{ option[0] }}">{{ option[1] }}</option>
                {%- endfor -%}
              {%- endif %}
            </select>
            {%- elsif control.type == "register" %}
            <div class="{{ machine_type }}-control" style="float:left;padding-right:8px;padding-bottom:8px;">
              <div class="pcjs-control-title" style="text-align:right;">{{ control.label | default: control.id }}</div>
              <div class="{{ machine_type }}-binding pcjs-control-title pcjs-register" data-value="{type:'register',binding:'{{ control.id }}'}">{{ control.value | default: "0000" }}</div>
              <div style="clear:both"></div>
            </div>
            {%- elsif control.type == "flag" %}
            <div class="{{ machine_type }}-control" style="float:left;padding-right:4px;padding-bottom:8px;">
              <div class="pcjs-control-title" style="text-align:right;">{{ control.label | default: control.id }}</div>
              <div class="{{ machine_type }}-binding pcjs-control-title pcjs-flag" data-value="{type:'flag',binding:'{{ control.id }}'}">{{ control.value | default: "0" }}</div>
              <div style="clear:both"></div>
            </div>
            {%- elsif control.type == "switches" %}
            <div class="{{ machine_type }}-binding pcjs-control-title pcjs-switches" data-value="{type:'{{ control.type }}',binding:'{{ control.id }}'}">
              {%- for switch in control.switches -%}
                {%- if switch.value == "0"}
                  {%- assign switch_color = "color: rgb(0, 0, 0); background-color: rgb(255, 255, 255);" -%}
                {%- else -%}
                  {%- assign switch_color = "color: rgb(255, 255, 255); background-color: rgb(0, 0, 0);" -%}
                {% endif %}
              <div id="{{ switch.id }}" class="pcjs-bitCell" data-value="{{ switch.value }}" title="{{ switch.title }}" style="{{ switch_color }}">{{ switch.label }}</div>
              {%- endfor %}
            </div>
            {%- elsif control.type == "text" %}
            <input class="{{ machine_type }}-binding" type="text" style="width:auto;" data-value="{type:'text',binding:'{{ control.id }}'}" value="" autocapitalize="off">
            {%- elsif control.type == "textarea" %}
            <textarea class="{{ machine_type }}-binding pcjs-textarea" style="width:{{ control.width | default: "100%" }};height:{{ control.height | default: "auto" }};resize:{{ control.resize | default: "vertical" }};" data-value="{type:'{{ control.type }}',binding:'{{ control.id }}'}" autocomplete="off" autocapitalize="off" spellcheck="false"></textarea>
            {%- else %}
            <!-- unrecognized control type: {{ control.type }} -->
            {%- endif %}
          </div>
          {%- endfor %}
          {%- if control_group != "" %}
        </div>
          {%- endif -%}
        {%- endcapture -%}
      {%- endif -%}
    {%- endif %}
      <div id="{{ machine_id }}.{{ component_id }}" class="pcjs-{{ component.class }} {{ machine_type }}-{{ component.class }} {{ machine_type }}-component"{% if component_style != "" %} style="{{ component_style }}"{% endif %}>{{ component_title }}{{ component_controls }}
        <div class="{{ machine_type }}-{{ component.class }}-object{{ component_class }}" data-value="{{ component_config }}">{{ component_elements }}</div>
      </div>
  {%- endfor -%}
    </div>
  {%- if machine_debugger %}
    <div class="pcjs-reference" style="padding-left:8px">[<a href="{% if machine_debugger == "available" %}debugger{% else %}{{ machine_debugger }}{% endif %}/" onclick="pcjsOnClick(this)">Debugger</a>]</div>
  {%- endif %}
    <div class="pcjs-copyright">
  {%- assign machine_name = machine_data.name | default: "PCjs Machines" %}
  {%- assign machine_version = machine_data.version | default: machine_data.shared.version | default: "1.00" %}
      <a href="{{ '/' | absolute_url }}" target="_blank">{{ machine_name }}</a> v{{ machine_version }} © 2012-2025 <a href="{{ site.github.owner_url }}" target="_blank">Jeff Parsons</a>
    </div>
  </div>
</div>
{%- endif -%}
{%- if machine_does_not_exist -%}
<p class="machine-error">{{ machine_name }} does not exist: {{ include.id }}</p>
{%- endif -%}
{{ machine_errors }}