{{ attach_library('ui_patterns/libraries.bs_forms') }}

{% set spinner %}
  {% include "@molecules/tm-bs/spinner/spinner.twig" with {
   'ajax': true
  } only %}
{% endset %}

<h2>Examples</h2>
<pre>
  { { altcom_ajax_button(
    'Show my stuff <i class=\"fad fa-spinner-third\"></i>',
    'my_theme_hook',
    'my-target-id',
    {'foo': 'foo', 'bar': 'bar'}, 1)
  } }
</pre>
{{ altcom_ajax_button(
  "Show my stuff #{spinner}",
  'my_theme_hook',
  'my-target-id',
  {'foo': 'foo', 'bar': 'bar'}, 1, 0, 1)
}}
<div class="altcom-ajax-target" id="my-target-id">
  {% include "@molecules/tm-bs/spinner/spinner.twig" %}
</div>
<hr>
<h2>Implementations</h2>

<pre>
{ { altcom_ajax_button(
  'title',
  'template',
  'target',
  {'foo': 'foo', 'bar': 'bar'})
} }
</pre>
{{ altcom_ajax_button(
  'title',
  'template',
  'target',
  {'foo': 'foo', 'bar': 'bar'})
}}

<hr>
<pre>
{ altcom_ajax_link(
  'title',
  'template',
  'target',
  {'foo': 'foo', 'bar': 'bar'})
}
</pre>
{{ altcom_ajax_link(
  'title',
  'template',
  'target',
  {'foo': 'foo', 'bar': 'bar'})
}}

<hr>
<pre>
{ % set attrs = altcom_ajax_attrs_array(
  'template',
  'target',
  {'foo': 'foo', 'bar': 'bar'})
% }
</pre>
{% set attrs = altcom_ajax_attrs_array(
  'template',
  'target',
  {'foo': 'foo', 'bar': 'bar'})
%}
<pre>{{ dump(attrs) }}</pre>

<hr>
<pre>
{ { altcom_ajax_attrs_string(
  'template',
  'target',
  {'foo': 'foo', 'bar': 'bar'})
} }
</pre>
{{ altcom_ajax_attrs_string(
  'template',
  'target',
  {'foo': 'foo', 'bar': 'bar'})
}}

<hr>
<pre>
{ % set ajax = altcom_ajax_attrs_string(
  'template',
  'after',
  {'foo': 'foo', 'bar': 'bar'}, 1)
% }
{ % set attributes = create_attribute()
  .setAttribute('data-foo', 'foo')
  .setAttribute('data-bar', 'bar')
% }
</pre>
{% set ajax = altcom_ajax_attrs_string(
  'template',
  'after',
  {'foo': 'foo', 'bar': 'bar'}, 1)
%}
{% set attributes = create_attribute()
  .setAttribute('data-foo', 'foo')
  .setAttribute('data-bar', 'bar')
%}
<a {{ attributes }} {{ ajax }}>Click me</a>

<hr>

<h2>Toggle and Update</h2>
<h3>Update</h3>
<pre>
  { { altcom_ajax_update('aa-auto-adv') } }
</pre>
{{ altcom_ajax_update('aa-auto-adv-a') }}
<div id="aa-auto-adv-a"></div>
<hr>
<pre>
  { { altcom_ajax_update('aa-auto-adv', 'Last time updated:') } }
</pre>
{{ altcom_ajax_update('aa-auto-adv-b', 'Last time updated:') }}
<div id="aa-auto-adv-b"></div>
<hr>
<h3>Toggle</h3>
<pre>
  { { altcom_ajax_toggle('aa-auto-adv') } }
</pre>
{{ altcom_ajax_toggle('aa-auto-adv-c') }}
<div id="aa-auto-adv-c"></div>
<hr>
<pre>
  { { altcom_ajax_toggle('aa-auto-adv', 'sgl') } }
</pre>
{{ altcom_ajax_toggle('aa-auto-adv-d', 'sgl') }}
<div id="aa-auto-adv-d"></div>
<hr>
<pre>
  { { altcom_ajax_toggle('aa-auto-adv', 'sgl', 'on', 'Turn update on', 'Turn update off', 'primary') } }
</pre>
{{ altcom_ajax_toggle('aa-auto-adv-e', 'sgl', 'on', 'Turn update on', 'Turn update off', 'primary') }}
<div id="aa-auto-adv-e"></div>
