{% assign tech_with_links = "ASP.NET MVC|Azure|BlogEngine.NET|Database Abstraction|Digital Ocean|Giraffe|GitHub|GitHub Pages|Hexo|Hugo|htmx|Jekyll|LiteDB|MongoDB|MySQL|myWebLog|nginx|Orchard|PHP|PostgreSQL|Rackspace Cloud|RavenDB|RethinkDB|SQL Server|Vue.js|WordPress" | split: "|" %}
{% assign tech_links = "https://dotnet.microsoft.com/apps/aspnet/mvc|https://azure.microsoft.com/|http://www.dotnetblogengine.net/|https://github.com/danieljsummers/DatabaseAbstraction|https://www.digitalocean.com/|https://giraffe.wiki|https://github.com/|https://pages.github.com/|https://hexo.io/|https://gohugo.io/|https://htmx.org/|https://jekyllrb.com/|https://www.litedb.org/|https://www.mongodb.com/|https://www.mysql.com/|https://bitbadger.solutions/open-source/myweblog/|http://nginx.org/|https://orchardproject.net/|https://www.php.net/|https://www.postgresql.org/|https://www.rackspace.com/cloud|https://ravendb.net/|https://rethinkdb.com/|https://www.microsoft.com/en-us/sql-server/|https://vuejs.org/|https://wordpress.org" | split: "|" %}
<h1 class="solution-header">
  {{ page.title }}<br>
  <small><small>
    {%- assign url     = page.metadata | value: "url" -%}
    {%- assign no_link = page.metadata | value: "no_link" -%}
    {%- assign archive = page.metadata | where: "Name", "archive_url" | size -%}
    {% if no_link == "true" -%}
      {{ url }}
    {%- else -%}
      <a href="{{ url }}" target="_blank" rel="noopener">{{ url }}</a>
    {%- endif %}
    {% if archive > 0 -%}
      &nbsp;&nbsp;
      <a href="{{ page.metadata | value: "archive_url" }}" target="_blank" rel="noopener"><small>(Archive)</small></a>
    {%- endif %}
  </small></small>
</h1>
<div class="app-info">
  <article class="content">
    <aside>
      {%- capture screen_url %}screenshots/{{ page.permalink | split: "/" | last }}.png{% endcapture -%}
      <img src="{{ screen_url | theme_asset }}" alt="Screen shot of {{ page.title | escape }}">
    </aside>
    {{ page.text }}
    {%- assign curr_tech  = page.metadata | where: "Name", "tech" -%}
    {%- assign past_tech  = page.metadata | where: "Name", "past_tech" -%}
    {%- assign curr_count = curr_tech | size -%}
    {%- assign past_count = past_tech | size -%}
    {% if curr_count > 0 or past_count > 0 -%}
      <section aria-label="The Technology Stack">
        <h3 onclick="toggle('techStack')">
          The Technology Stack<span id="techStackArrow" class="arrow">&#x25BC;</span>
        </h3>
        <div id="techStack" class="collapse-panel hidden">
          {% if curr_count > 0 -%}
            {% if past_count > 0 -%}
              <p><small><strong>Current:</strong></small></p>
            {%- endif %}
            <ul>
              {% for curr in curr_tech -%}
                {%- assign tech = curr.value | split: "|" -%}
                {%- assign link_idx = -1 -%}
                {%- for tech_name in tech_with_links -%}
                  {%- if tech_name == tech[0] %}{% assign link_idx = forloop.index0 %}{% endif -%}
                {%- endfor -%}
                <li>
                  {% if link_idx >= 0 -%}
                    <a href="{{ tech_links[link_idx] }}" target="_blank" rel="noopener">{{ tech[0] }}</a>
                  {% else %}
                    {{ tech[0] }}
                  {%- endif %} for {{ tech[1] }}
                </li>
              {%- endfor %}
            </ul>
          {%- endif %}
          {% if past_count > 0 -%}
            {% if curr_count > 0 %}
              <p><small><strong>Previously:</strong></small></p>
            {% endif %}
            <ul>
              {% for past in past_tech -%}
                {%- assign tech = past.value | split: "|" -%}
                {%- assign link_idx = -1 -%}
                {%- for tech_name in tech_with_links -%}
                  {%- if tech_name == tech[0] %}{% assign link_idx = forloop.index0 %}{% endif -%}
                {%- endfor -%}
                <li>
                  {% if link_idx >= 0 %}
                    <a href="{{ tech_links[link_idx] }}" target="_blank" rel="noopener">{{ tech[0] }}</a>
                  {% else %}
                    {{ tech[0] }}
                  {%- endif %} for {{ tech[1] }}
                </li>
              {%- endfor %}
            </ul>
          {% endif %}
        </div>
      </section>
    {%- endif %}
    <p><br><a href="{{ "solutions" | relative_link }}">&laquo; Back to All Solutions</a></p>
    {% if is_logged_on -%}
      <p><small><a hx-boost="false" href="{{ page | edit_page_link }}">Edit This Page</a></small></p>
    {% endif %}
  </article>
</div>
<script>
  function toggle(id) {
    const section = document.getElementById(id)
    const arrow   = document.getElementById(`${id}Arrow`)
    if (section.className.indexOf("shown") === -1) {
      section.className = `${section.className} shown`
      arrow.innerHTML = "&#x25B2;"
    } else {
      section.className = section.className.replace(" shown", "")
      arrow.innerHTML = "&#x25BC;"
    }
  }
</script>