---
layout: default
---

{% include site-header.html %}

<main class="main container">
<div class="content-up">
    <article class="article--page  typeset">
      <h4 id="{{page.uid}}">{{page.name}}</h4>
      {% if page.safetybriefing -%}
          <div style="line-height: 18pt; margin:10px 0; width: 100%; background-color: #FFF8DC; border-width: 1em; border-color: #FDDA0D; border-radius: 10px; min-height: 40pt; vertical-align: middle;">
              <span style="float: left; color: #e67206; font-size: 40pt; display:block; width: 50pt; height: 40pt; text-align:center; line-height: 40pt;">⚠</span>Um dieses Gerät benutzen zu dürfen benötigst du eine <a href="{{page.safetylink}}" style="vertical-align: middle;">Einweisung</a>!
          </div>
      {% endif -%}
      {% if page.contact -%}
      Ansprechpersonen:
      <div class="toolcontact" id="toolcontact">
        <li>
        {% for person in page.contact -%}
          {% for people in site.people -%}
            {% if people.name == person -%}
              <ul>{people.name}}
               {% if people.email and people.email != '' -%}
                <a class="navlink" href="{{ people.email }}"><span class="fa-solid fa-envelope"></span></a>
              {% endif %}
              {% if people.matrix and people.matrix != '' -%}
                <a class="navlink" href="{{ people.matrix }}"><span class="fa fa-matrix-org"></span></a>
              {% endif -%}
              {% if people.mastodon and people.mastodon != '' -%}
                <a class="navlink" href="{{ people.mastodon }}"><span class="fa-brands fa-mastodon"></span></a>
              {% endif -%}
              </ul>
            {% endif -%}
          {% endfor %}
        {% endfor %}
      </li>
      </div>
      {% endif -%}
      <p> {{page.content}}</p>
      {%- if page.imagetag -%} {%- include {{site.gallery}} topic=page.imagetag -%} {%- endif -%}
      {% if page.wikilink %}<p>Mehr infos findest du im <a href="{{page.wikilink}}">Wiki</a>.<p>{% endif %}

      <div style="
       position: relative;
       background-color: #fafafa;
       border: 10px solid;
       border-color: #e67206;
       padding: 10px 25px;
       max-width:80%;
       font-family:sans-serif">
        <h4 style="font-family:sans-serif;font-size:28pt;">{{page.name}}</h4>
          <ul style="list-style-type:none;">
          {% for hint in page.hints %}<li style="margin:15px 0;line-height:18pt;">{{hint}}</li>{% endfor %}
          </ul>
          <p style="text-align:center;margin:0">
          {% for c in page.commandsigns %}
            <a href="https://de.wikipedia.org/wiki/Gebotszeichen" target="_blank" style="background-image:none;"><img src="{{ site.url }}/assets/iso7010/{{ c}}.svg" alt="{{c}}" width="100"></a>
          {% endfor %}
          </p>

          {% if page.safetybriefing %}
            <p style="line-height: 18pt; margin:10px 0">
              <span style="float: left; color: #e67206; font-size: 40pt; display:block; width: 50pt; height: 40pt; text-align:center; line-height: 40pt;">⚠</span>Um dieses Gerät benutzen zu dürfen benötigst du eine <a href="{{page.safetylink}}">Einweisung</a>!
            </p>
          {% endif %}

          <p style="text-align:center;margin-bottom:0px;"><a href="https://wiki.chaotikum.org/hackspace:ausstattung:start">wiki.chaotikum.org/hackspace:ausstattung:start</a></p>
       </div>
      </article>     

    {%- if page.sets contains 'leihbar' -%}
    <div id="calendar"></div>
    </div> 
    {% endif %}
</main>

{% include site-footer.html %}

<script src='{{ site.url }}/assets/fullcalendar/moment.min.js'></script>
      <script src='{{ site.url }}/assets/fullcalendar/jquery.min.js'></script>
      <script src='{{ site.url }}/assets/fullcalendar/ical.min.js'></script>
      <script src='{{ site.url }}/assets/fullcalendar/fullcalendar.min.js'></script>
      <script src='{{ site.url }}/assets/fullcalendar/de.js'></script>
      <script>
      $(document).ready(function() {
        $('#calendar').fullCalendar({
          header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay,listMonth'
          },
          eventLimit: true, // allow "more" link when too many events
          locale: "de",
          navLinks: true,
        });
        {% assign realslug = page.url | split:'/' | last %}
          $.get('{{ site.url }}/loancal/{{realslug}}/loancal.ics', function (res) {
            var events = []
            var parsed = ICAL.parse(res);
            parsed[2].forEach(function(event) {
              if (event[0] !== 'vevent') return
              var data = {};
              event[1].forEach(function(item){
                data[item[0]] = item[3];
              });
              events.push({
                title: data["summary"],
                start: data["dtstart"],
                end: data["dtend"],
                url: data["url"],
                location: data["location"]
              });
            });
            e_source = {}
            e_source['events'] = events;
            e_source['id'] = 'holydays'
            e_source['color']="{{device.calcolor}}"
            $('#calendar').fullCalendar('addEventSource', e_source);
          });
        });
</script>