{% extends "base.html" %}
{% block content %}
<!--nodes in svg as links-->
<!--animation with CSS-->
<!--nodes load template based on GET request on click-->
<!--content(info) is loaded into placeholder in template-->
<!--actix get div and load on click-->
<div id="mobile">
    <svg id="a" width="320" height="568" version="1.1" viewBox="0 0 80 175" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

        <defs>
            <pattern id="spiderpi" height="100%" width="100%">
                <image href="/assets/img/spider_out.webp" width="44" height="30"></image>
            </pattern>  
        </defs>

        <defs>
            <pattern id="permapp" height="100%" width="100%">
                <image href="/assets/img/sample-permapp-screen.webp" width="30" height="30"></image>
            </pattern>  
        </defs>

        <defs>
            <pattern id="cyber" height="100%" width="100%">
                <image href="/assets/img/3d_greenhouse.webp" width="55" height="35"></image>
            </pattern>  
        </defs>

        <defs>
            <pattern id="kaos" height="100%" width="100%">
                <image href="/assets/img/cube_space.webp " width="25" height="25"></image>
            </pattern>  
        </defs>

        <defs>
            <pattern id="hemp" height="100%" width="100%">
                <image href="/assets/img/hemp.webp" width="30" height="45"></image>
            </pattern>  
        </defs>

        <defs>
            <pattern id="machina" height="100%" width="100%">
                <image href="/assets/img/boat_construction.webp" width="26" height="31"></image>
            </pattern>  
        </defs>

        <g id="position" transform="translate(-36.486 -121.6)" stroke="#000">
        <g id="connect" transform="matrix(1.2003 0 0 1.2003 26.945 106.96)">
        
        <g class="group_1">
            <path id="edge_1" class="edges" d="m33.037 28.44c23.239 25.242 23.239 25.228 23.239 25.228" stroke-width="2.6458"/>
            <path id="edge_2" class="edges" d="m21.599 60.776c11.451-32.343 11.438-32.337 11.438-32.337" stroke-width="2.6458"/>

            <a href="/spider_info">
                <ellipse id="circle_one" class="nodes" cx="35" cy="27" rx="13.5" ry="13.5" style="paint-order: fill stroke markers" fill="url(#spiderpi)"/>
            </a>
        </g>
        
        <g class="group_2">
        <path id="edge_3" class="edges" d="m24.862 67.439c31.427-13.767 31.414-13.772 31.414-13.772" stroke-width="2.6458"/>
        <path id="edge_6" class="edges" d="m18.277 93.674c38.021-40.006 37.999-40.007 37.999-40.007" stroke-width=".52917"/>
        <path id="edge_4" class="edges" d="m69.403 85.356c-13.122-31.702-13.127-31.689-13.127-31.689" stroke-width="3.4396"/>
        <path id="edge_5" class="edges" d="m50.728 121.44c2.3527-71.49 2.3361-71.474 2.3361-71.474" stroke-width=".48836px"/>
        <circle id="circle_2" class="nodes" cx="60" cy="52" r="13" style="paint-order:fill stroke markers" fill="url(#permapp)"/>
        </g>

        <g class="group_3">
            <path id="edge_7" class="edges" d="m30.477 64.503c29.347 29.791 29.347 29.774 29.347 29.774" stroke-width=".52917"/>
            <path id="edge_8" class="edges" d="m23.453 62.106c28.366 67.295 28.374 67.263 28.374 67.263" stroke-width=".55417px"/>
            <circle id="circle_3" class="nodes" cx="20" cy="60" r="13" style="paint-order: fill stroke markers" fill="url(#cyber)"/>
        </g>

        <g class="group_4">
            <path id="edge_9" class="edges" d="m26.119 94.06c34.309 0.3248 34.299 0.31493 34.299 0.31493" stroke-width="2.6458"/>
            <circle id="circle_4" class="nodes" cx="65.545" cy="91.148" r="12" style="paint-order: fill stroke markers" fill="url(#kaos)"/>
        </g>

        <g class="group_5">
            <path id="edge_10" class="edges" d="m23.407 96.406c23.239 25.242 23.239 25.228 23.239 25.228" stroke-width="2.9104"/>
            <a id="link_1" href="/spider" style="paint-order: fill stroke markers">
                <circle id="circle_5" class="nodes" cx="20.734" cy="95.501" r="12.5" style="paint-order: fill stroke markers" fill="url(#hemp)"/>
            </a>
        </g>

        <circle id="circle_6" class="nodes" cx="50" cy="120" r="12.5" style="paint-order: fill stroke markers" fill="url(#machina)"/>
    </g>

    <g fill="#333" stroke-linecap="round" stroke-linejoin="bevel" stroke-opacity=".99634" stroke-width=".12003">
    </g>
    </g>
    </svg>

<div class="mobile_placeholder">
    <!--info windows-->
    
    <input type="checkbox" class="toggle_info">
    <svg class="close" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <defs>
            <linearGradient id="myGradient" gradientTransform="rotate(90)">
              <stop offset="5%"  stop-color="#8693AB" />
              <stop offset="95%" stop-color="#BDD4E7" />
            </linearGradient>

            <linearGradient id="myGradient2" gradientTransform="rotate(45)">
                <stop offset="5%"  stop-color="#BDD4E7" />
                <stop offset="95%" stop-color="#8693AB" />
              </linearGradient>
          </defs>
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
    </svg>
    <div class="open"></div>
    {# {% block child %} {% endblock %} #}

</div>
</div>

<!-- Get requests, load templates, inherit index.html, alt Post and foregnelement form in svg -->


{% endblock %}