🚀RELEASE v0.2.0

Merge branch 'feature/12-user-management' into dev
[tmp] - disable darkmode + re-enable sw
2021-01-11 21:17:35 +01:00 · 2021-01-11 21:17:12 +01:00 · 2021-01-11 21:17:05 +01:00 · 2021-01-11 21:10:40 +01:00 · 2021-01-11 21:08:44 +01:00 · 2021-01-11 21:08:39 +01:00
78 changed files with 4340 additions and 8731 deletions
--- a/.dockerignore
+++ b/.dockerignore
@@ -0,0 +1,3 @@
+public/env.sample.js
+public/workbox-*.js
+public/workbox-*.js.map
--- a/.drone.yml
+++ b/.drone.yml
@@ -0,0 +1,41 @@
+---
+kind: pipeline
+type: docker
+name: build:dev
+
+steps:
+  - name: build dev
+    image: plugins/docker
+    depends_on: [clone]
+    settings:
+      username:
+        from_secret: DOCKER_REGISTRY_USER
+      password:
+        from_secret: DOCKER_REGISTRY_PASSWORD
+      repo: registry.odit.services/lfk/frontend
+      tags:
+        - dev
+      registry: registry.odit.services
+  - name: run full license export
+    depends_on: ["clone"]
+    image: node:alpine
+    commands:
+      - yarn
+      - yarn licenses:export
+  - name: push new licenses file to repo
+    depends_on: ["run full license export"]
+    image: appleboy/drone-git-push
+    settings:
+      branch: dev
+      commit: true
+      commit_message: new license file version [CI SKIP]
+      author_email: bot@odit.services
+      remote: git@git.odit.services:lfk/frontend.git
+      ssh_key:
+        from_secret: GITLAB_SSHKEY
+
+trigger:
+  branch:
+    - dev
+  event:
+    - push
--- a/.gitignore
+++ b/.gitignore
@@ -3,4 +3,8 @@
 node_modules
 dist
 dist-ssr
-
+public/env.js
+/build
+yarn.lock
+package-lock.json
+*.map
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -0,0 +1,298 @@
+### Changelog
+
+All notable changes to this project will be documented in this file. Dates are displayed in UTC.
+
+#### [0.2.0](https://git.odit.services/lfk/frontend/compare/0.1.6...0.2.0)
+
+- 🔒 added rendering based on permission level [`5937a0d`](https://git.odit.services/lfk/frontend/commit/5937a0d7ce970d38ddb0e4c6a02d11f8c8b53e9b)
+- ❌ UserDetail - delete [`4512272`](https://git.odit.services/lfk/frontend/commit/4512272c1c2a5c861d8ac4c9908244df125dc3d9)
+- 🖊 UserDetail - reactivity on edit + update functionality [`ce1f384`](https://git.odit.services/lfk/frontend/commit/ce1f3842e0f581d9e94ea6079cf223d945f7465d)
+- [tmp] - disable darkmode + re-enable sw [`c7679b7`](https://git.odit.services/lfk/frontend/commit/c7679b7a67b362a7fbf796f612892bdfac50731c)
+- 🕕 set manual refresh time to 2min [`be629e5`](https://git.odit.services/lfk/frontend/commit/be629e5c6b076bf9a28dcc953e97478d244d8413)
+- 🐞 [tmp] - nginx.conf - disable .js file caching [`e6ac34b`](https://git.odit.services/lfk/frontend/commit/e6ac34bde8d288a45e83fc6723a2bbe952f2622a)
+- ℹ update jwtinfo store on token refresh [`6356968`](https://git.odit.services/lfk/frontend/commit/63569684a392bf0c24c9c2efd7945114d1a230a5)
+
+#### [0.1.6](https://git.odit.services/lfk/frontend/compare/0.1.5...0.1.6)
+
+> 10 January 2021
+
+- ✨ UsersOverview - user delete [`f0c100a`](https://git.odit.services/lfk/frontend/commit/f0c100aee47d6a5aeb0995db79b268f33bf316e9)
+- 🔒 UserDetail - added basic layout for permission change [`81c1537`](https://git.odit.services/lfk/frontend/commit/81c1537bada2c87127385d9110d48459cd1b505f)
+- 🚀RELEASE v0.1.6 [`ee01c3a`](https://git.odit.services/lfk/frontend/commit/ee01c3a059c435add68938657955cbd2c5851c50)
+- 📧 UserDetail - email input [`f856c6a`](https://git.odit.services/lfk/frontend/commit/f856c6ae3792c93aee148339d89e3978db6e9293)
+- ✨ UserDetail multiselect layout for groups [`98ecfab`](https://git.odit.services/lfk/frontend/commit/98ecfab0325e35c5418775f7162049b56e5f332f)
+- UserDetail - placeholder for permission picker 🔒 [`b948b8c`](https://git.odit.services/lfk/frontend/commit/b948b8c1a48e5b4bc6a083139d26100ef4499970)
+
+#### [0.1.5](https://git.odit.services/lfk/frontend/compare/0.1.4...0.1.5)
+
+> 10 January 2021
+
+- Merge commit '16f572480ad55425890061f9dad65fe85f2f39ad' into dev [`#30`](https://git.odit.services/lfk/frontend/issues/30)
+- 🚀RELEASE v0.1.5 [`330755c`](https://git.odit.services/lfk/frontend/commit/330755c63e3405533a5da79c84ef4f379eb43e1c)
+- ⤵ load dynamic build info in Footer component [`c089bb3`](https://git.odit.services/lfk/frontend/commit/c089bb39298fb1067093c2fa81101130c214947c)
+- 📅 dynamic copyright year in Footer component [`b8a9e4f`](https://git.odit.services/lfk/frontend/commit/b8a9e4f272f925999b9a032dd009f7498acbfae0)
+- 👀 improved Footer layout + display on Login component [`43b4065`](https://git.odit.services/lfk/frontend/commit/43b406592ebe115cea04a8dbf36874c0a5bdd7e9)
+- ✨ added versionbuilder.js script [`1dd6674`](https://git.odit.services/lfk/frontend/commit/1dd6674faad686c0048a62b4cd25ab21b5c8b04f)
+- ⚡ add versionbuilder script to release hook [`16f5724`](https://git.odit.services/lfk/frontend/commit/16f572480ad55425890061f9dad65fe85f2f39ad)
+- 🔨 sample build of index.html with versionbuilder script [`3caa1fc`](https://git.odit.services/lfk/frontend/commit/3caa1fc277b99ee767c1e1fc4a28fd247d98e659)
+
+#### [0.1.4](https://git.odit.services/lfk/frontend/compare/0.1.3...0.1.4)
+
+> 10 January 2021
+
+- Merge commit '45ec97066f425ac2ac66914be649cbd5a1038e10' into dev [`#20`](https://git.odit.services/lfk/frontend/issues/20)
+- 🌎 add remaining translation keys for filepond [`45ec970`](https://git.odit.services/lfk/frontend/commit/45ec97066f425ac2ac66914be649cbd5a1038e10)
+- add basic i18n logic to filepond [`b08c0f1`](https://git.odit.services/lfk/frontend/commit/b08c0f145a13d295b2a51c7a6da76faceb80a90c)
+- 🚀RELEASE v0.1.4 [`4674b52`](https://git.odit.services/lfk/frontend/commit/4674b52717e388122e113553b8a136c649ce030c)
+- 🌎 About - i18n [`692c906`](https://git.odit.services/lfk/frontend/commit/692c906cd26bdb7f7d730b90734d23748e0ab451)
+- ✨ About - change license modal icon to "legal" [`0e31ba2`](https://git.odit.services/lfk/frontend/commit/0e31ba212f99d90b133bc242e5b4d163aa99b93b)
+- new license file version [CI SKIP] [`4f3837a`](https://git.odit.services/lfk/frontend/commit/4f3837ac45a5df9a7476fd68ec9c069dc6b128cd)
+
+#### [0.1.3](https://git.odit.services/lfk/frontend/compare/0.1.2...0.1.3)
+
+> 10 January 2021
+
+- 🌎 improved i18n for AddUserModal and UserDetail [`1c356a4`](https://git.odit.services/lfk/frontend/commit/1c356a41f54a954afaa69ed524f62c1676f7bbee)
+- 🧹 simplified UsersOverview table [`e1d5d54`](https://git.odit.services/lfk/frontend/commit/e1d5d54cfb1fb20e56f0e971e2cfd196e9a913ac)
+- 🌎 added i18n for UsersOverview [`3754f09`](https://git.odit.services/lfk/frontend/commit/3754f09b2f395a82ff8c3a9c655ab8a782e7eb71)
+- 🖊 add basic UserDetail editing reactivity [`6012d05`](https://git.odit.services/lfk/frontend/commit/6012d0577e2ae6caf44aaee54335188bc767fff7)
+- AddUserModal - data validation [`264e0d7`](https://git.odit.services/lfk/frontend/commit/264e0d7ed98c5000da543af154d6e36a6b956e4a)
+- ✨ sample layout for advanced search [`5ec1dfa`](https://git.odit.services/lfk/frontend/commit/5ec1dfa8b0da4619f14e73794b9a9e22872aa330)
+- userdetail - dynamic buttons [`ded3198`](https://git.odit.services/lfk/frontend/commit/ded31980bfbf9f09afa2818bdcc8cc3e40748441)
+- 🚀RELEASE v0.1.3 [`ccb5125`](https://git.odit.services/lfk/frontend/commit/ccb5125a48486ef55709419eccd7d9e912a1e64c)
+- 🔍 UsersOverview table - basic fuzzy search [`b9e0be4`](https://git.odit.services/lfk/frontend/commit/b9e0be448398d087005e220d08e34461490be14e)
+
+#### [0.1.2](https://git.odit.services/lfk/frontend/compare/0.1.2-1...0.1.2)
+
+> 10 January 2021
+
+- Merge commit '2a37dfafa426e070aa136d171a1a01aa7f609d18' into dev [`#29`](https://git.odit.services/lfk/frontend/issues/29)
+- Merge commit '5810b4ec4396ad650d90493fb48e2a8320865b42' into dev [`#4`](https://git.odit.services/lfk/frontend/issues/4)
+- 🔒 added basic manual refresh every 4mins [`d92c6c0`](https://git.odit.services/lfk/frontend/commit/d92c6c0de9d6b72027b8aa27b22e3dc7b5116af1)
+- 🚀RELEASE v0.1.2 [`242b5af`](https://git.odit.services/lfk/frontend/commit/242b5afbe93a6100826b0340f821ad2a2c4de343)
+- dropped redundant console.log [`2a37dfa`](https://git.odit.services/lfk/frontend/commit/2a37dfafa426e070aa136d171a1a01aa7f609d18)
+- 💾 save new auth data to localstorage [`2cbb431`](https://git.odit.services/lfk/frontend/commit/2cbb431acc0fe1aa333ddedb76510486a5fcf191)
+- new license file version [CI SKIP] [`519ba79`](https://git.odit.services/lfk/frontend/commit/519ba79e1d5d97e2f59f769ef952a649481b55c0)
+
+#### [0.1.2-1](https://git.odit.services/lfk/frontend/compare/0.1.2-0...0.1.2-1)
+
+> 10 January 2021
+
+- 🚀RELEASE v0.1.2-1 [`5810b4e`](https://git.odit.services/lfk/frontend/commit/5810b4ec4396ad650d90493fb48e2a8320865b42)
+- 🧪 modified auto-changelog to commit CHANGELOG.md [`52aa996`](https://git.odit.services/lfk/frontend/commit/52aa99681bb02472e0433cb32b89dde814cd9467)
+
+#### [0.1.2-0](https://git.odit.services/lfk/frontend/compare/0.1.1...0.1.2-0)
+
+> 10 January 2021
+
+- 🧪 experimental - auto changelog generation [`b28f76a`](https://git.odit.services/lfk/frontend/commit/b28f76a1d46a7abdd3014398d41ff976bf39230b)
+- 🚀RELEASE v0.1.2-0 [`0276c3d`](https://git.odit.services/lfk/frontend/commit/0276c3deeb8d78f9773bea724e4007f03e8de5e4)
+
+#### [0.1.1](https://git.odit.services/lfk/frontend/compare/0.1.0...0.1.1)
+
+> 10 January 2021
+
+- 🚀RELEASE v0.1.1 [`a66f6bb`](https://git.odit.services/lfk/frontend/commit/a66f6bbec8e9d6be4fd0b68e0a388d351dbc5cb1)
+- 🧪 move changelog generation to default [`139b329`](https://git.odit.services/lfk/frontend/commit/139b3294cdfd2437605142de0e4bb029f03f54f6)
+
+#### 0.1.0
+
+> 10 January 2021
+
+- Merge commit '2657f30cf3acaa592408d2d4cddcb02bf76bb6af' into dev [`#27`](https://git.odit.services/lfk/frontend/issues/27)
+- Merge commit '80d30a8e5425f4041e79c299095c36386b8d7777' into dev [`#26`](https://git.odit.services/lfk/frontend/issues/26)
+- 📦 further Dockerfile/ Bundle optimizations [`#25`](https://git.odit.services/lfk/frontend/issues/25)
+- Merge commit 'bb0eb6d1e276186af2c1e5d26abda4413c278981' into dev [`#11`](https://git.odit.services/lfk/frontend/issues/11)
+- Merge branch 'feature/24-i18n-formatting' into dev [`#24`](https://git.odit.services/lfk/frontend/issues/24)
+- Merge branch 'feature/17-license_collection' into dev [`#17`](https://git.odit.services/lfk/frontend/issues/17)
+- Merge pull request 'feature/10-dashboard-stats' (#21) from feature/10-dashboard-stats into develop [`#10`](https://git.odit.services/lfk/frontend/issues/10)
+- Merge pull request 'feature/8-login-preserve' (#19) from feature/8-login-preserve into develop [`#8`](https://git.odit.services/lfk/frontend/issues/8)
+- Merge pull request 'feature/5-base-components' (#18) from feature/5-base-components into develop [`#5`](https://git.odit.services/lfk/frontend/issues/5)
+- Merge commit 'de7cd1267df684b5befd6111aa347e76c6f2ffdd' into develop [`#7`](https://git.odit.services/lfk/frontend/issues/7)
+- 🌑 enable tailwind darkmode in config [`#6`](https://git.odit.services/lfk/frontend/issues/6)
+- basic move to snowpack [`#3`](https://git.odit.services/lfk/frontend/issues/3)
+- tailwind config [`#2`](https://git.odit.services/lfk/frontend/issues/2)
+- license.json export + usage [`9ab72ae`](https://git.odit.services/lfk/frontend/commit/9ab72aed19f4174abdff83e45d9f3bfd16448ad4)
+- basic User Components [`08278b3`](https://git.odit.services/lfk/frontend/commit/08278b36a5ed8096ae1d8eed6d10dcc1abdc5943)
+- general page cleanups [`3f961dd`](https://git.odit.services/lfk/frontend/commit/3f961dd3bd559968626ee9cacb2b4fb00f776a64)
+- demo run [`70e10f7`](https://git.odit.services/lfk/frontend/commit/70e10f7a70cf24fe4b78eee91bf4af3e37452fff)
+- basic AddUserModal ui [`e5ec98b`](https://git.odit.services/lfk/frontend/commit/e5ec98bf6f599fe7fcf53065666cff880e0d5dfd)
+- working on user detail page [`0e08c7f`](https://git.odit.services/lfk/frontend/commit/0e08c7f075571c8734bcda3347e2e2635c46c806)
+- simplified css classes for cleanliness [`9684c22`](https://git.odit.services/lfk/frontend/commit/9684c22da3c9029d00057a3efe9a0fe34fd41070)
+- first UserDetail page mockup [`d570336`](https://git.odit.services/lfk/frontend/commit/d5703365e46e52ee5b3090a89526a887db9ffc0d)
+- AboutPage - read license text modal [`c0328c5`](https://git.odit.services/lfk/frontend/commit/c0328c5cdb1edc1c3dca368d65b84e640ef4df3c)
+- fixed datatable-emptystate transition [`10bf88e`](https://git.odit.services/lfk/frontend/commit/10bf88e4ba2390dbf78925f0541c49a4abe3041d)
+- working on AddUserModal [`cb58fdf`](https://git.odit.services/lfk/frontend/commit/cb58fdfd8ed6c20551d99cefe37e10e9e46f13bf)
+- display full user names in overview table [`6529907`](https://git.odit.services/lfk/frontend/commit/6529907a139edd8450e699a8ea9befae622137f7)
+- reactivity on adding a new Track [`f37ba1d`](https://git.odit.services/lfk/frontend/commit/f37ba1dbf7cc71573bcfbc1fe09c2a4b9d0d3404)
+- User Overview table expansion [`58d68c8`](https://git.odit.services/lfk/frontend/commit/58d68c8324b6306be697cde0be53f0c5caf262aa)
+- basic track deletion working ✅ [`35a9aa4`](https://git.odit.services/lfk/frontend/commit/35a9aa40cbbb86bd004cf18792951dd3f81fc859)
+- Track edit animation [`e5fcb2e`](https://git.odit.services/lfk/frontend/commit/e5fcb2ef68cdbc55875d5bf7f97ddfe297abe7e1)
+- basic edit logic in table [`039fd8f`](https://git.odit.services/lfk/frontend/commit/039fd8f90ebccf8594c608c4cd7c8fe5178c66d0)
+- ⚡ PWA optimizations [`bc66ebb`](https://git.odit.services/lfk/frontend/commit/bc66ebbf0aa2a756829b92a0869b60c093f5e7f8)
+- UserDetailOne sample ui [`23e03be`](https://git.odit.services/lfk/frontend/commit/23e03bec352a9ec53cb3962b4f6ec64b0ea643ad)
+- improved sidebar icons [`5c218c6`](https://git.odit.services/lfk/frontend/commit/5c218c64abc3e54fcc00ba996a9b4749d3340c75)
+- added Breadcrumb nav to UserDetail [`11457b2`](https://git.odit.services/lfk/frontend/commit/11457b2792dca55225280854456481b7c6978071)
+- basic ForgotPassword improvements [`e8c98a0`](https://git.odit.services/lfk/frontend/commit/e8c98a0a29518063d4f573a3c6a1055f3bf18906)
+- 🎨 general page styles [`02d8888`](https://git.odit.services/lfk/frontend/commit/02d8888d97da0125d47269bd8526c94535ff1efd)
+- AddTrackModal - basic validation w/ class + layout responses [`591dc09`](https://git.odit.services/lfk/frontend/commit/591dc09228408f4fff0349a42807c1d6268a59e3)
+- general dependency bump ⏫ [`6e4fe37`](https://git.odit.services/lfk/frontend/commit/6e4fe37378ab4af8e438fa7d0c7cf43fc45b2c99)
+- edit is working 🎉 [`68de076`](https://git.odit.services/lfk/frontend/commit/68de0762271eb9dbe0e7135f6457cf0b09d889d6)
+- move serviceworker registration to separate module [`8f25a87`](https://git.odit.services/lfk/frontend/commit/8f25a874cb2f7fc3181c356514e9e6c11136c9bc)
+- 🌍 i18n [`8443085`](https://git.odit.services/lfk/frontend/commit/84430854df8581b43eb48a153b52030cb1b384f1)
+- AddTrackModal action [`501bf7a`](https://git.odit.services/lfk/frontend/commit/501bf7a5f4895f5b821abfe62830602171a57655)
+- 🌍 translations [`48ddc62`](https://git.odit.services/lfk/frontend/commit/48ddc621921f796a02c0bf74d5721a7851cd1523)
+- general cleanups [`5b15141`](https://git.odit.services/lfk/frontend/commit/5b15141ecc0a5ed6a689e739b0f8990be244fa53)
+- 🐞👀 visual fix in Footer component [`0c7bc07`](https://git.odit.services/lfk/frontend/commit/0c7bc07d67f7449e51bbb3d5f1f7af3241aa2839)
+- include minimum lap times [`7210f1b`](https://git.odit.services/lfk/frontend/commit/7210f1b947de01ca6f3ebad600744fd49b0a561f)
+- general + PWA optimizations [`43ecd83`](https://git.odit.services/lfk/frontend/commit/43ecd83213abe401f324e058bd255ce0b76f553c)
+- improved order script for scalability [`947482c`](https://git.odit.services/lfk/frontend/commit/947482c1b51ad1b5a055eddf112e6aa6b88f5939)
+- i18n 🌍 [`1c2636d`](https://git.odit.services/lfk/frontend/commit/1c2636d6693cafe9011d24c1cbdefc9a3eaa008c)
+- delete confirmation [`7d1b519`](https://git.odit.services/lfk/frontend/commit/7d1b51918f5fee8791d1bd4e36056c4d979a2a96)
+- Component + Login cleanup [`b111463`](https://git.odit.services/lfk/frontend/commit/b1114634e804b0f41b80c87afa6903ffc17f575c)
+- AddTrackModal - more input validation response [`fe297f6`](https://git.odit.services/lfk/frontend/commit/fe297f67795c35f3ea0e9a88b8453b27a4de05e0)
+- UserOverview cleanup [`71c7611`](https://git.odit.services/lfk/frontend/commit/71c761187f0e645ef06808fac930045589cb7c1a)
+- AddTrackModal - minlaptime validation [`bb0eb6d`](https://git.odit.services/lfk/frontend/commit/bb0eb6d1e276186af2c1e5d26abda4413c278981)
+- AddTrackModal - add track icon [`7bb5a18`](https://git.odit.services/lfk/frontend/commit/7bb5a18527994f4fe3f23a87106a431f1ebfe7d1)
+- StatCards direct linking to detail page [`9527167`](https://git.odit.services/lfk/frontend/commit/9527167fbc8774d57fce206b40800f249fd50ed8)
+- added basic release-it config [`52a19c2`](https://git.odit.services/lfk/frontend/commit/52a19c2036e6d928c790f914f53ebd614d0e1bea)
+- move FormLayout component to Settings Page [`9309ea9`](https://git.odit.services/lfk/frontend/commit/9309ea9a30a062ecb6ddc4152174ca9371fd32b8)
+- logic cleanup 🧠 [`59d5ad5`](https://git.odit.services/lfk/frontend/commit/59d5ad5bd32ad45ccfb50ab4ae4dfe47db182113)
+- use outsideclick custom directive in AddTrackModal component [`2657f30`](https://git.odit.services/lfk/frontend/commit/2657f30cf3acaa592408d2d4cddcb02bf76bb6af)
+- 🐳 added Docker buildsteps for sw generation [`aaef97d`](https://git.odit.services/lfk/frontend/commit/aaef97dd431d27dbab023fd05c281b8b35a1b6df)
+- improved empty state [`6e00ac8`](https://git.odit.services/lfk/frontend/commit/6e00ac8f1f9bcc9ac714177c5ab2d1d04854aaa5)
+- AddTrackModal padding style [`d830727`](https://git.odit.services/lfk/frontend/commit/d830727036a5bf0f7d81efba2d15ac4394ea82e4)
+- added general PromiseError component [`9e19c48`](https://git.odit.services/lfk/frontend/commit/9e19c482584062380403d505be28c1ce13a7f442)
+- basic formatting script [`f9aa262`](https://git.odit.services/lfk/frontend/commit/f9aa262cab64596185323dbf5fb96e70019bf126)
+- 🌍 i18n lap time [`dadccc1`](https://git.odit.services/lfk/frontend/commit/dadccc1b5f7e38adeae8c988efe1ad63252f7599)
+- added routing to UserDetail page [`3c4a109`](https://git.odit.services/lfk/frontend/commit/3c4a10944ebcf7a627f2749e21572342059452da)
+- added outsideclick as custom directive [`a042c8a`](https://git.odit.services/lfk/frontend/commit/a042c8a870323262803989df840f15c351393a24)
+- added middlename input field to mock [`8cf73a2`](https://git.odit.services/lfk/frontend/commit/8cf73a2be0ae5cb842d78ae2071fdc54bb18c4bc)
+- re-enable Tailwind compile with postcss [`6915123`](https://git.odit.services/lfk/frontend/commit/6915123973460fea5a7e6934404dc5906114a812)
+- display profilepic properly [`4fd1ac2`](https://git.odit.services/lfk/frontend/commit/4fd1ac28c58366d6d719942a2953d093b3829a01)
+- general dependency bump ⏫ [`f7d7b83`](https://git.odit.services/lfk/frontend/commit/f7d7b837c457e6ed324f3512979506e96386b207)
+- Login Component Accessibility 👀 [`fc5c8d1`](https://git.odit.services/lfk/frontend/commit/fc5c8d13093023632129134cbae702cd840e95c2)
+- NGINX config - enable brotli compression [`1f50574`](https://git.odit.services/lfk/frontend/commit/1f5057438fa75e3c5ff3fd76f4bb52658f4b74ec)
+- remove duplicate class usage in Dash Component [`dbc660c`](https://git.odit.services/lfk/frontend/commit/dbc660c48e33d98b8c7e0c5ddb33729c0cc54799)
+- ❌ escape key support [`0c3e74f`](https://git.odit.services/lfk/frontend/commit/0c3e74f8a3f04997faa3f1aa10926f09972ac3f6)
+- 🚀RELEASE v0.1.0 [`1aac783`](https://git.odit.services/lfk/frontend/commit/1aac783df351526787ba8aff12c013a8ab06524f)
+- ▶ ENTER key submit [`80d30a8`](https://git.odit.services/lfk/frontend/commit/80d30a8e5425f4041e79c299095c36386b8d7777)
+- EmptyState fixup [`02bfecd`](https://git.odit.services/lfk/frontend/commit/02bfecd54015ad6c6de25c246552feeab5c084ef)
+- 🎨 OrgDetail style fix [`3a702aa`](https://git.odit.services/lfk/frontend/commit/3a702aa91e768ab58e017d859732fcac960edac6)
+- re-added missing i18n keys [`17e7778`](https://git.odit.services/lfk/frontend/commit/17e7778d15380a2bd3d2f0bb38ed9c69bcb0bdce)
+- ⏫ bump to @odit/license-exporter@0.0.9 for version support [`919910d`](https://git.odit.services/lfk/frontend/commit/919910d4a8c7ee2876b51de78b72311230476a32)
+- AddTrackModal - autofocus on modal open [`388fc8f`](https://git.odit.services/lfk/frontend/commit/388fc8f239560be221687c69bfbffd9e1b3e56e1)
+- AddTrackModal - trap focus if active [`0e7640b`](https://git.odit.services/lfk/frontend/commit/0e7640bf86b6710d01cd6c553f205cad934f58bb)
+- ⏫ bump lfk client [`236aba8`](https://git.odit.services/lfk/frontend/commit/236aba89c2967c38402b909e65ad724e27144f17)
+- ⏫ dependency bump [`ba87349`](https://git.odit.services/lfk/frontend/commit/ba87349a88a54152874b6a30218042a676799c68)
+- 🌍 i18n [`281747a`](https://git.odit.services/lfk/frontend/commit/281747a681624ecaeee902910f1ff3c52f9e3155)
+- move OpenAPI config to App component rather than Login [`b107f5d`](https://git.odit.services/lfk/frontend/commit/b107f5de95489b02fe73e8fdc2836b02d1d29d02)
+- NGINX config - fix 404 error for SPA usage [`32e4f22`](https://git.odit.services/lfk/frontend/commit/32e4f223f89d2b58ffc2466aded008fa1c948290)
+- 🐞fixed snowpack config for bundle optimization [`3e8d0b5`](https://git.odit.services/lfk/frontend/commit/3e8d0b54627f175bfe29bfc14308fa433e2c72af)
+- 🐞 fix malfuntion in logout logic [`7cf2ffc`](https://git.odit.services/lfk/frontend/commit/7cf2ffce2d2b7905388169a9c38462337699b5e5)
+- actually perform user logout (recreate Cookies, invalidate token) [`2048533`](https://git.odit.services/lfk/frontend/commit/2048533fda6da6fdc0aeb0f42f3c6a66d7e87911)
+- proper middlename display support [`644b9a7`](https://git.odit.services/lfk/frontend/commit/644b9a76836c626fb3581a352ae53c72cd99b5b0)
+- ignore licenses.json in serviceworker [`c38d33a`](https://git.odit.services/lfk/frontend/commit/c38d33a549143143d08ccbe5b82f14174eaebf70)
+- dependency bump ⏫ [`9aeb99d`](https://git.odit.services/lfk/frontend/commit/9aeb99d775e1bb7a8a26d68836dd8d4a4b085406)
+- Dashboard - fix accessibility focus state on nav Dropdown + Logout [`44029c8`](https://git.odit.services/lfk/frontend/commit/44029c812eebe3ee591dc2133c35082c5b3de41f)
+- move toastify css to app base [`34ecb8b`](https://git.odit.services/lfk/frontend/commit/34ecb8b2fb19d243db35bd59f98d93f08d522f25)
+- ⏫ tinro dependency bump [`e62277b`](https://git.odit.services/lfk/frontend/commit/e62277bdd2492119dd78a41d6cb3c415c7ce69b8)
+- new layout margin from page title [`51c9c3f`](https://git.odit.services/lfk/frontend/commit/51c9c3fe3c7dc3d6f4d5665e3eac1fbc6f837659)
+- add basic package script [`e361c89`](https://git.odit.services/lfk/frontend/commit/e361c89f6c6b719e4a7fa1b0db23885249cd3b2b)
+- added release-it dev dependency [`0023e22`](https://git.odit.services/lfk/frontend/commit/0023e225243af7b6e2d85ee18522ee7f67828b73)
+- AddTrackModal - placeholder input [`d45eec9`](https://git.odit.services/lfk/frontend/commit/d45eec94ab7386ef29170b03e73c7683b36a3a0d)
+- add package script [`1cd03ef`](https://git.odit.services/lfk/frontend/commit/1cd03ef02748f55b8e66e5e26b3e2be64b659313)
+- track lap time interactive placeholder [`008c91a`](https://git.odit.services/lfk/frontend/commit/008c91a5526edc51d4995565f1681f300f980b51)
+- Merge commit '3a702aa91e768ab58e017d859732fcac960edac6' into feature/11-tracks-management [`8af63fc`](https://git.odit.services/lfk/frontend/commit/8af63fc22a47959859153f8e742df86f73b9be54)
+- init [`32357ec`](https://git.odit.services/lfk/frontend/commit/32357ece0a7195ea1135c9c3e4c6c84323f95b4d)
+- tmp [`1b7173c`](https://git.odit.services/lfk/frontend/commit/1b7173cda9134ee8058a00bdc030defa80d46bfc)
+- Login - move to env.js import [`8ef0b21`](https://git.odit.services/lfk/frontend/commit/8ef0b21819309752c573d0485f6514152fb684e6)
+-  initial commit [`4bb3bae`](https://git.odit.services/lfk/frontend/commit/4bb3bae4e6fc89c35a8a2b36b7cd6e6d47958eae)
+- Initial license export [`4c96b9a`](https://git.odit.services/lfk/frontend/commit/4c96b9a3e04dbb7c021c71aa8828a29248509fbe)
+- 🚚 move to tinro svelte router [`a50ea15`](https://git.odit.services/lfk/frontend/commit/a50ea15b38023b867a9f7757e973184cbcdd2457)
+- new Dashboard [`7270ce9`](https://git.odit.services/lfk/frontend/commit/7270ce9d32869abd4f6ac65ab7c2c87363633cbe)
+- Tracks sample page w/ modal [`c2cf8a0`](https://git.odit.services/lfk/frontend/commit/c2cf8a098974c6f2e75690a5f767a8282fd95789)
+- Profile page [`d580522`](https://git.odit.services/lfk/frontend/commit/d5805229b3dfed37a3a210fcbcc1435fe1b6952e)
+- PwReset view [`98bc810`](https://git.odit.services/lfk/frontend/commit/98bc810e515fc04192e6058e0dce272a2e34e76a)
+- StatCards - fetch real data from API [`3d93b04`](https://git.odit.services/lfk/frontend/commit/3d93b04264e99f4717e48e68136a08c85e54d4a0)
+- general UI cleanup [`0e5fbb8`](https://git.odit.services/lfk/frontend/commit/0e5fbb8835331966c23522d831be2a6a08ae123f)
+- Dashboard component cleanup [`89fcfe6`](https://git.odit.services/lfk/frontend/commit/89fcfe6a4903f77360257883b11fce689de9f5cb)
+- improved About page + route [`45cd532`](https://git.odit.services/lfk/frontend/commit/45cd532c1ae322759b7fe5393bb27c17c3c03f83)
+- 🌎 first i18n support [`2c77450`](https://git.odit.services/lfk/frontend/commit/2c774508848d918b0348cac5c81c376952c07ae5)
+- i18n fix + more pages [`4633a9b`](https://git.odit.services/lfk/frontend/commit/4633a9b3aeec136ad6f434fa46a3925b37ac5524)
+- i18n compatible datatable [`3c36bea`](https://git.odit.services/lfk/frontend/commit/3c36bea07cdd2bf690e93fe8ddfbf5be62ddc7cb)
+- more translations [`1dc4983`](https://git.odit.services/lfk/frontend/commit/1dc498302f9ab0563187439a7c207b00f0af3acb)
+- tmp [`8ff1c55`](https://git.odit.services/lfk/frontend/commit/8ff1c55ba4e52f36931eb53aaa18021a1b894a7a)
+- Tags [`3bd954e`](https://git.odit.services/lfk/frontend/commit/3bd954e9ffe558495427b899e0f33baffc9d227d)
+- About page [`a977b34`](https://git.odit.services/lfk/frontend/commit/a977b34adbf5b95b8813ab0a18252dab7f3a8a75)
+- ForgotPassword page [`25e62f0`](https://git.odit.services/lfk/frontend/commit/25e62f09075dbb0150d48698d8dd4ba4bb9530e3)
+- Sidebar [`4765fae`](https://git.odit.services/lfk/frontend/commit/4765faeddc3e90c3d8696595f1db223c97e4b890)
+- ✨ Avatars [`7e69eee`](https://git.odit.services/lfk/frontend/commit/7e69eeef295901749dcb2a9b5d57a40959288fa4)
+- 🖼 new icons + i18n for card titles [`4f02a5b`](https://git.odit.services/lfk/frontend/commit/4f02a5bac0b12f89cfa95e8effc65d5b9cdad732)
+- basic dependencies + first layout [`3ce8284`](https://git.odit.services/lfk/frontend/commit/3ce82840783e24ed605837fbde76f5562f1256c1)
+- 💡 sample card layout + data [`20ee0c1`](https://git.odit.services/lfk/frontend/commit/20ee0c1a9efe588a8a24d47cc345c24e76c02e6f)
+- Breadcrumb component [`815e07c`](https://git.odit.services/lfk/frontend/commit/815e07c13262607f2f0e701423b8b85d7996cf9c)
+- ✨ Badges [`2fa102b`](https://git.odit.services/lfk/frontend/commit/2fa102b5430cbd57dfb63823450c15abd71bbd3b)
+- first working router 🎉 [`b4d1370`](https://git.odit.services/lfk/frontend/commit/b4d13701a7ee16ad0281271b233eb03632673ffc)
+- Dashboard code cleanup [`9b036de`](https://git.odit.services/lfk/frontend/commit/9b036de4d7adce065ff454b3183dcd78866a2363)
+- 💾 login state preserve (localstorage) + ℹ JWT payload parsing [`13ccb56`](https://git.odit.services/lfk/frontend/commit/13ccb56354135704834ffade8085ddbc8c03b369)
+- profile actions dropdown [`a80d3b0`](https://git.odit.services/lfk/frontend/commit/a80d3b060faad61f625776e23739f4b2837927c5)
+- Added drone file with pipeline for dev [`9bf21a0`](https://git.odit.services/lfk/frontend/commit/9bf21a0eeb6d32cab18dcbb55f571969773fffac)
+- DataTable [`d293859`](https://git.odit.services/lfk/frontend/commit/d2938591bf157e88acfd274ff1dfd527a1ce8588)
+- 🚧 move to new config based env [`2cdd1cd`](https://git.odit.services/lfk/frontend/commit/2cdd1cd96196f586abfa50ba2f2b05f99545c669)
+- Dashboard -  dropdown arrow change [`b27fb8c`](https://git.odit.services/lfk/frontend/commit/b27fb8c0b5532710c97947731f0725e37f13c579)
+- filepond integration ✅ [`ada6888`](https://git.odit.services/lfk/frontend/commit/ada68887a2e6a4a552c1d093f5ec1afaebd918d3)
+- more translations [`186803f`](https://git.odit.services/lfk/frontend/commit/186803f8216c991927d8f5c8ec6aa19016267858)
+- general cleanups [`428d2e2`](https://git.odit.services/lfk/frontend/commit/428d2e25790e7509c535970accbe9f79fbf6ab65)
+- 🐳 move to new + simple Dockerfile [`9202b47`](https://git.odit.services/lfk/frontend/commit/9202b473f579c50f9a0b269ee2ef9530cd690d2c)
+- TracksOverview route [`f3f318f`](https://git.odit.services/lfk/frontend/commit/f3f318fd01372eea1edff265d678f1a03e252377)
+- Sidebar - UX logic w/ interactivity [`773800e`](https://git.odit.services/lfk/frontend/commit/773800e73203d438fe2f3e8245b6d13e9407f996)
+- Login component - enter key listener [`016f08b`](https://git.odit.services/lfk/frontend/commit/016f08b07cf2b40a53a57642d7bc75ebd669feab)
+- 🐳 new Dockerfile [`33d8622`](https://git.odit.services/lfk/frontend/commit/33d8622eb27d284dddb9bc14740e7a90b4b809d5)
+- AddTrackModal cleanup [`f5d0e28`](https://git.odit.services/lfk/frontend/commit/f5d0e285fb3a913b7a26bf2ce7b7621502b68e49)
+- Footer component cleanup [`05306c7`](https://git.odit.services/lfk/frontend/commit/05306c75a555d38adad3f3fc4a4d3bd1211c626c)
+- ♻️ drop svelte-spa-router [`46491f3`](https://git.odit.services/lfk/frontend/commit/46491f38a0cf8d2ef3ceac00ce1be289a594eade)
+- 🚧 working on sidebar [`e4c6c57`](https://git.odit.services/lfk/frontend/commit/e4c6c5711d55e8acb4366cebbd9c8b7c45741c5e)
+- added webmanifest 🧾 [`de7cd12`](https://git.odit.services/lfk/frontend/commit/de7cd1267df684b5befd6111aa347e76c6f2ffdd)
+- basic service worker registration via workbox [`13b6b32`](https://git.odit.services/lfk/frontend/commit/13b6b320411a4fda24c49cdec5fd890d09d02c9c)
+- more i18n usage + logo [`d817058`](https://git.odit.services/lfk/frontend/commit/d817058e515cf79c782446c4b8c9443b15211523)
+- ✨ Tabs [`e6815eb`](https://git.odit.services/lfk/frontend/commit/e6815eb75f45b56a8404a24d0d96b3e79ba73834)
+- Dashboard - use sample components [`b2b05a4`](https://git.odit.services/lfk/frontend/commit/b2b05a4ec9f565ec92ebbf84ad4ed5f1eb80cbfe)
+- Tracks page cleanup [`9af4cfe`](https://git.odit.services/lfk/frontend/commit/9af4cfe73f92f28e42c0d2bd83f687be16d4b8f0)
+- Track page cleanup [`72f1645`](https://git.odit.services/lfk/frontend/commit/72f1645767ab57a6ce94bbe80eff2858a113bace)
+- first language support [`35d379d`](https://git.odit.services/lfk/frontend/commit/35d379d84303cfb119c8df97d8ad0222e9749826)
+- cleaned up Login component for darkmode compatibility [`040359a`](https://git.odit.services/lfk/frontend/commit/040359aa933bdfd3d2119229d29c95aa5a308a86)
+- Tracks datatable action ui [`9975c0c`](https://git.odit.services/lfk/frontend/commit/9975c0cf64c356c30e229127bfa6d04df1b41a4a)
+- hash based routing in env file [`3396d17`](https://git.odit.services/lfk/frontend/commit/3396d173586a6bb9518d07e4f9d84b6ba0bcf4b9)
+- 🌎 translations [`0ff0a29`](https://git.odit.services/lfk/frontend/commit/0ff0a29dfe73c38b1c0c2dfb9b1e92a1b90e6c9c)
+- dependency bumps ⏫ [`0dc8bff`](https://git.odit.services/lfk/frontend/commit/0dc8bffaec36b5f0419f84ee5722805b0d329f86)
+- 🧠 logic cleanup in Login component [`90be420`](https://git.odit.services/lfk/frontend/commit/90be4200ca2578fe6b7f516b6c2b427e4875694a)
+- demo login [`5499669`](https://git.odit.services/lfk/frontend/commit/5499669564801aab526a54cac4dca154e0fac6a4)
+- [tmp] - move to cdn usage [`1473267`](https://git.odit.services/lfk/frontend/commit/1473267e8c7fd303c67ae8044c9846cd5ec94f9c)
+- 🧹 drop nanoid dependency [`71b6258`](https://git.odit.services/lfk/frontend/commit/71b6258bc36576b4d9ad61556661ba299831e988)
+- updated Dockerfile for snowpack ❄ [`6f787f6`](https://git.odit.services/lfk/frontend/commit/6f787f63f7530d6da94195e0e148b97f581b0bed)
+- add Tracks route to app [`728dd40`](https://git.odit.services/lfk/frontend/commit/728dd40f16f11dd80275388cff75e2971172eb5a)
+- small bugfix [`b9410dc`](https://git.odit.services/lfk/frontend/commit/b9410dc5f1611f274c882e74312e2187757be246)
+- 🌍 i18n - general_promise_error [`f1b2c1d`](https://git.odit.services/lfk/frontend/commit/f1b2c1de267dd0388de293e481d2739a3eb64d38)
+- move filepond import to css-in-js [`e48502f`](https://git.odit.services/lfk/frontend/commit/e48502fb41f483685e24b8d054406a8cc7459451)
+- Dashboard - demo urls [`c65c138`](https://git.odit.services/lfk/frontend/commit/c65c138830f883d85c897478dc1c44ef527f195e)
+- gitignore yarn.lock package-lock.json [`112516c`](https://git.odit.services/lfk/frontend/commit/112516ccfd6f00014c611cc14bf5a4bb431a9bca)
+- ⏫ dependency bump [`1104ab2`](https://git.odit.services/lfk/frontend/commit/1104ab20c7de0ab5c97e0dc636835b2a4e25ed6b)
+- Updated dev branch name [`b538b6c`](https://git.odit.services/lfk/frontend/commit/b538b6cb7103b47ef7bc34c04087580918c09f6d)
+- Added script for license export [`1fba3ef`](https://git.odit.services/lfk/frontend/commit/1fba3ef9e43f3d9302409446d6ed2a641e554d7c)
+- added translations 🌍 [`b4df123`](https://git.odit.services/lfk/frontend/commit/b4df123c0402ab7ae42fd8289ae9bb2f3fff9d5e)
+- ✨ NotFound [`d188ae6`](https://git.odit.services/lfk/frontend/commit/d188ae658af7541764d34884e8ca67a59f0955c2)
+- DataTable - load from json object [`a379327`](https://git.odit.services/lfk/frontend/commit/a379327d67ba5e9bab1724cf7e170c01166b4d64)
+- ⏫ dependency bump svelte [`905d8b0`](https://git.odit.services/lfk/frontend/commit/905d8b0a201631cdca462a8a33d5fd394db36305)
+- favicon + title [`d2b2542`](https://git.odit.services/lfk/frontend/commit/d2b254241295fa177af01a9f2f0fb747a7f9f02e)
+- 🎨 TailwindStyles - Chromium fix [`9fbe1c7`](https://git.odit.services/lfk/frontend/commit/9fbe1c7c6cce21ba536128ceaa35b72c7841f67f)
+- 👋 sample user info usage on dashboard [`813c058`](https://git.odit.services/lfk/frontend/commit/813c058a9a805bc2f63586e50c5b949d33406654)
+- 🔧 re-enable jwtinfo userdetails in Dashboard [`12eb207`](https://git.odit.services/lfk/frontend/commit/12eb207605f69598a9a2308cf9b1c2d4916f8cb3)
+- Dependency: Bumped license-exporter version [`0842640`](https://git.odit.services/lfk/frontend/commit/0842640fec285a3d99f0c7551f008919e64e5dcd)
+- move StatCards up in Dashboard UI [`e9a6637`](https://git.odit.services/lfk/frontend/commit/e9a6637eb9f303dc93dbbc3287f9b7b4d92ed42a)
+- 🐞 translation fix [`517c638`](https://git.odit.services/lfk/frontend/commit/517c6381bae270346c8ba60dd3287d96d17d4bf3)
+- Dashboard - hide overflow [`4c161b3`](https://git.odit.services/lfk/frontend/commit/4c161b3c7067ed042deeea3bea0ef24b306c94a1)
+- ⏫ bump client to 0.0.5 [`9633a09`](https://git.odit.services/lfk/frontend/commit/9633a09b730be91c31419cd8bfcea108c82976d3)
+- ⏫ Bump snowpack to 3.0.0-rc.2 🧪❄ [`9a53e32`](https://git.odit.services/lfk/frontend/commit/9a53e326917bc1b9756baf2ce511447974779c8f)
+- ✒ package rename [`937d044`](https://git.odit.services/lfk/frontend/commit/937d044b59095192859d516fbf60c04b057562be)
+- add theme color to index [`fe40fd9`](https://git.odit.services/lfk/frontend/commit/fe40fd9a91f634046a974a90986e915ee3c53cc0)
--- a/23
+++ b/23
@@ -1,6 +1,19 @@
+FROM node:15.4.0-alpine3.12
+WORKDIR /app
+RUN npm i -g pnpm
+COPY package.json ./
+RUN pnpm i
+COPY package.json *.config.js workbox-config.js ./
+COPY src ./src
+COPY public ./public
+RUN pnpm run build:sw
+RUN pnpm run build
+# final image
+FROM alpine
+COPY --from=0 /app/build /app
+RUN rm -rf /app/build/_dist_/components
+RUN rm -rf /app/build/_dist_/locales
+RUN rm -rf /app/build-manifest.json
 FROM fholzer/nginx-brotli:v1.19.1
-ENV APP_CONF="config={}"
-# TODO: buildstep
-COPY ./dist /usr/share/nginx/html
-COPY nginx.conf /etc/nginx/conf.d/default.conf.template
-# COPY ./nginx.conf /etc/nginx/nginx.conf
+COPY --from=1 /app /usr/share/nginx/html
+COPY ./nginx.conf /etc/nginx/nginx.conf
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -1,9 +1,8 @@
-version: '3'
+version: "3"
 services:
    httpd:
        build: .
-        environment:
-            - APP_CONF=config={"baseUrl":"http://localhost:8081"}
-        command: ["sh", "-c", "envsubst < /etc/nginx/conf.d/default.conf.template > /etc/nginx/conf.d/default.conf && nginx -g 'daemon off;'"]
+        volumes:
+            - ./public/env.sample.js:/usr/share/nginx/html/env.js
        ports:
-            - 4050:80
+            - 4050:80
--- a/env.sample.js
+++ b/env.sample.js
@@ -0,0 +1,6 @@
+const config = {
+	baseurl: 'https://dev.lauf-fuer-kaya.de',
+	fallback_username: 'admin',
+	fallback_password: '72fpTzsev4xUu78QPs2FCbwZ3',
+	prefersHashRouting: true
+};
--- a/index.html
+++ b/index.html
@@ -1,13 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" href="/favicon.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Svelte App</title>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tailwindcss@2.0.2/dist/tailwind.min.css">
-  </head>
-  <body>
-    <script type="module" src="/src/index.js"></script>
-  </body>
-</html>
--- a/nginx.conf
+++ b/nginx.conf
@@ -1,22 +1,24 @@
-# http {
+events {
+}
+http {
    include mime.types;
-    # sendfile on;
+    sendfile on;
    server {
+        error_page 404 /index.html;
        root /usr/share/nginx/html;
        location / {
-            add_header "Set-Cookie" '${APP_CONF}';
+            try_files $uri $uri/ /index.html;
        }
-
-        location ~* \.(?:ico|css|js|gif|jpe?g|png)$ {
+        location ~* \.(?:ico|css|gif|jpe?g|png)$ {
            expires 1y;
            add_header Pragma public;
            add_header Cache-Control "public";
        }
        # --- Brotli
-        # brotli on;
-        # brotli_comp_level 6;
-        # brotli_static on;
-        # brotli_types application/atom+xml application/javascript application/json application/rss+xml application/vnd.ms-fontobject application/x-font-opentype application/x-font-truetype application/x-font-ttf application/x-javascript application/xhtml+xml application/xml font/eot font/opentype font/otf font/truetype image/svg+xml image/vnd.microsoft.icon image/x-icon image/x-win-bitmap text/css text/javascript text/plain text/xml;
+        brotli on;
+        brotli_comp_level 6;
+        brotli_static on;
+        brotli_types application/atom+xml application/javascript application/json application/rss+xml application/vnd.ms-fontobject application/x-font-opentype application/x-font-truetype application/x-font-ttf application/x-javascript application/xhtml+xml application/xml font/eot font/opentype font/otf font/truetype image/svg+xml image/vnd.microsoft.icon image/x-icon image/x-win-bitmap text/css text/javascript text/plain text/xml;
        # --- GZIP
        gzip on;
        gzip_disable "msie6";
@@ -25,6 +27,25 @@
        gzip_comp_level 6;
        gzip_buffers 16 8k;
        gzip_http_version 1.1;
-        gzip_types application/javascript application/rss+xml application/vnd.ms-fontobject application/x-font application/x-font-opentype application/x-font-otf application/x-font-truetype application/x-font-ttf application/x-javascript application/xhtml+xml application/xml font/opentype font/otf font/ttf image/svg+xml image/x-icon text/css text/javascript text/plain text/xml;
+        gzip_types application/javascript
+            application/rss+xml
+            application/vnd.ms-fontobject
+            application/x-font
+            application/x-font-opentype
+            application/x-font-otf
+            application/x-font-truetype
+            application/x-font-ttf
+            application/x-javascript
+            application/xhtml+xml
+            application/xml
+            font/opentype
+            font/otf
+            font/ttf
+            image/svg+xml
+            image/x-icon
+            text/css
+            text/javascript
+            text/plain
+            text/xml;
    }
-# }
+}
--- a/order.js
+++ b/order.js
@@ -0,0 +1,16 @@
+const fs = require('fs');
+// get all language files
+const files = fs.readdirSync('./src/locales/');
+files.forEach((f) => {
+	// read file as object
+	const unordered = JSON.parse(fs.readFileSync(`src/locales/${f}`));
+	// order object by keys alpabetically A-Z
+	const ordered = Object.keys(unordered).sort().reduce((obj, key) => {
+		obj[key] = unordered[key];
+		return obj;
+	}, {});
+	// format output as json for commit diff compatibility
+	const out = JSON.stringify(ordered, 0, 4);
+	// write output file
+	fs.writeFileSync(`src/locales/${f}`, out);
+});
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -1,19 +1,57 @@
 {
-	"name": "my-first-svite-project",
-	"version": "0.0.0",
+	"name": "@odit/lfk-frontend",
+	"version": "0.2.0",
 	"scripts": {
-		"dev": "svite",
-		"build": "svite build",
-		"start": "svite serve"
+		"i18n-order": "node order.js",
+		"dev": "snowpack dev",
+		"build": "snowpack build",
+		"build:sw": "workbox generateSW workbox-config.js",
+		"release": "release-it",
+		"changelog": "npx auto-changelog --commit-limit false --template https://raw.githubusercontent.com/release-it/release-it/master/templates/changelog-compact.hbs",
+		"licenses:export": "license-exporter --json -o public"
 	},
 	"dependencies": {
-		"@odit/lfk-client-js": "^0.0.4",
-		"svelte-i18n": "^3.3.0",
-		"toastify-js": "^1.9.3"
+		"@odit/lfk-client-js": "0.0.10",
+		"filepond": "4.25.1",
+		"gridjs": "3.2.1",
+		"localforage": "1.9.0",
+		"lodash.isequal": "^4.5.0",
+		"svelte-filepond": "0.0.1",
+		"svelte-focus-trap": "1.0.1",
+		"svelte-i18n": "3.3.0",
+		"tailwindcss": "2.0.2",
+		"tinro": "0.5.6",
+		"toastify-js": "1.9.3",
+		"validator": "13.5.2"
 	},
 	"devDependencies": {
-		"svelte": "^3.29.7",
-		"svelte-hmr": "^0.11.6",
-		"svite": "^0.8.1"
+		"@odit/license-exporter": "0.0.9",
+		"@snowpack/plugin-svelte": "3.4.1",
+		"auto-changelog": "^2.2.1",
+		"autoprefixer": "10.2.1",
+		"postcss": "8.2.4",
+		"postcss-load-config": "3.0.0",
+		"release-it": "^14.2.2",
+		"snowpack": "3.0.0-rc.2",
+		"svelte": "3.31.2",
+		"svelte-preprocess": "4.6.1",
+		"workbox-cli": "6.0.2"
+	},
+	"release-it": {
+		"git": {
+			"commit": true,
+			"requireCleanWorkingDir": false,
+			"commitMessage": "🚀RELEASE v${version}",
+			"push": false,
+			"tag": true,
+			"tagName": null,
+			"tagAnnotation": "v${version}"
+		},
+		"npm": {
+			"publish": false
+		},
+		"hooks": {
+			"after:bump": "npx auto-changelog --commit-limit false -p -u --hide-credit && git add CHANGELOG.md && node versionbuilder.js  && git add public/index.html"
+		}
 	}
 }
--- a/public/env.sample.js
+++ b/public/env.sample.js
@@ -0,0 +1,5 @@
+const config = {
+	baseurl: 'http://localhost:4010',
+	// optional
+	prefersHashRouting: true
+};
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/favicon.png
+++ b/public/favicon.png
--- a/public/index.html
+++ b/public/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <link rel="icon" href="/favicon.png" />
+  <link rel="manifest" href="/manifest.webmanifest">
+  <link rel="apple-touch-icon" href="/lfk-logo.png">
+  <meta name="theme-color" content="#FFFFFF">
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta name="description" content="Lauf Für Kaya! - Admin" />
+  <title>Lauf für Kaya! - Admin</title>
+</head>
+
+<body>
+  <span style="display: none;visibility: hidden;" id="buildinfo">RELEASE_INFO-0.2.0-RELEASE_INFO</span>
+  <noscript>You need to enable JavaScript to run this app.</noscript>
+  <script src="/env.js"></script>
+  <script defer type="module" src="/_dist_/index.js"></script>
+</body>
+
+</html>
--- a/public/lfk-logo.png
+++ b/public/lfk-logo.png
--- a/public/licenses.json
+++ b/public/licenses.json
--- a/public/logo.svg
+++ b/public/logo.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 98.1 118">
+  <path fill="#ff3e00" d="M91.8 15.6C80.9-.1 59.2-4.7 43.6 5.2L16.1 22.8A31.25 31.25 0 001.9 43.9c-1.3 7.3-.2 14.8 3.3 21.3-2.4 3.6-4 7.6-4.7 11.8-1.6 8.9.5 18.1 5.7 25.4 11 15.7 32.6 20.3 48.2 10.4l27.5-17.5c7.5-4.7 12.7-12.4 14.2-21.1 1.3-7.3.2-14.8-3.3-21.3 2.4-3.6 4-7.6 4.7-11.8 1.7-9-.4-18.2-5.7-25.5"/>
+  <path fill="#fff" d="M40.9 103.9a21.8 21.8 0 01-23.4-8.7c-3.2-4.4-4.4-9.9-3.5-15.3l.6-2.6.5-1.6 1.4 1c3.3 2.4 6.9 4.2 10.8 5.4l1 .3-.1 1c-.1 1.4.3 2.9 1.1 4.1a6.62 6.62 0 008.8 2L65.5 72c1.4-.9 2.3-2.2 2.6-3.8.3-1.6-.1-3.3-1-4.6a6.56 6.56 0 00-8.8-1.9l-10.5 6.7a18.6 18.6 0 01-5.6 2.4 21.8 21.8 0 01-23.4-8.7 20.2 20.2 0 01-3.4-15.3c.9-5.2 4.1-9.9 8.6-12.7l27.5-17.5c1.7-1.1 3.6-1.9 5.6-2.5a21.8 21.8 0 0123.4 8.7c3.2 4.4 4.4 9.9 3.5 15.3-.2.9-.4 1.7-.7 2.6l-.5 1.6-1.4-1c-3.3-2.4-6.9-4.2-10.8-5.4l-1-.3.1-1c.1-1.4-.3-2.9-1.1-4.1a6.56 6.56 0 00-8.8-1.9L32.4 46.1c-1.4.9-2.3 2.2-2.6 3.8s.1 3.3 1 4.6a6.56 6.56 0 008.8 1.9l10.5-6.7c1.7-1.1 3.6-1.9 5.6-2.5a21.8 21.8 0 0123.4 8.7c3.2 4.4 4.4 9.9 3.5 15.3-.9 5.2-4.1 9.9-8.6 12.7l-27.5 17.5c-1.7 1.1-3.6 1.9-5.6 2.5"/>
+</svg>
--- a/public/manifest.webmanifest
+++ b/public/manifest.webmanifest
@@ -0,0 +1,27 @@
+{
+	"name": "Lauf für Kaya! - Admin",
+	"short_name": "LfK!Admin",
+	"start_url": ".",
+	"display": "standalone",
+	"background_color": "#fff",
+	"theme_color": "#fff",
+	"description": "Lauf für Kaya! - Admin",
+	"icons": [
+		{
+			"src": "/favicon.png",
+			"sizes": "48x48",
+			"type": "image/png"
+		},
+		{
+			"src": "/favicon.png",
+			"sizes": "144x144",
+			"type": "image/png"
+		},
+		{
+			"src": "/lfk-logo.png",
+			"sizes": "1540x144",
+			"type": "image/png"
+		},
+		{ "src": "/maskable_icon_x1.png", "sizes": "750x750", "type": "image/png", "purpose": "any maskable" }
+	]
+}
--- a/public/maskable_icon_x1.png
+++ b/public/maskable_icon_x1.png
--- a/public/robots.txt
+++ b/public/robots.txt
@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:
--- a/public/sw.js
+++ b/public/sw.js
@@ -0,0 +1,2 @@
+if(!self.define){const e=e=>{"require"!==e&&(e+=".js");let r=Promise.resolve();return i[e]||(r=new Promise((async r=>{if("document"in self){const i=document.createElement("script");i.src=e,document.head.appendChild(i),i.onload=r}else importScripts(e),r()}))),r.then((()=>{if(!i[e])throw new Error(`Module ${e} didn’t register its module`);return i[e]}))},r=(r,i)=>{Promise.all(r.map(e)).then((e=>i(1===e.length?e[0]:e)))},i={require:Promise.resolve(r)};self.define=(r,s,o)=>{i[r]||(i[r]=Promise.resolve().then((()=>{let i={};const c={uri:location.origin+r.slice(1)};return Promise.all(s.map((r=>{switch(r){case"exports":return i;case"module":return c;default:return e(r)}}))).then((e=>{const r=o(...e);return i.default||(i.default=r),i}))})))}}define("./sw.js",["./workbox-c8ead010"],(function(e){"use strict";self.addEventListener("message",(e=>{e.data&&"SKIP_WAITING"===e.data.type&&self.skipWaiting()})),e.precacheAndRoute([{url:"favicon.ico",revision:"ba44f340afba5bb1a07f14decc15dd04"},{url:"favicon.png",revision:"07a9941cec62319578fa2a1734db9959"},{url:"favicon.svg",revision:"689d6c6fda51e359c0e5725d9e905064"},{url:"index.html",revision:"931c34f3675364dcc09411aa0f223776"},{url:"logo.svg",revision:"4c9e31a1f4268d7e36e22cda7656e561"},{url:"manifest.webmanifest",revision:"75c93eb352c4877216e77b1d7f73445f"},{url:"robots.txt",revision:"61c27d2cd39a713f7829422c3d9edcc7"}],{})}));
+//# sourceMappingURL=sw.js.map
--- a/public/workbox-c8ead010.js
+++ b/public/workbox-c8ead010.js
--- a/snowpack.config.js
+++ b/snowpack.config.js
@@ -0,0 +1,30 @@
+/** @type {import("snowpack").SnowpackUserConfig } */
+module.exports = {
+	mount: {
+		public: '/',
+		src: '/_dist_'
+	},
+	plugins: [ '@snowpack/plugin-svelte' ],
+	install: [
+		/* ... */
+	],
+	installOptions: {
+		/* ... */
+		sourceMap: false
+	},
+	devOptions: {
+		/* ... */
+	},
+	buildOptions: {
+		/* ... */
+	},
+	proxy: {
+		/* ... */
+	},
+	alias: {
+		/* ... */
+	},
+	experiments: {
+		optimize: { bundle: true, minify: true }
+	}
+};
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -1,23 +1,110 @@
 <script>
+  import "./TailwindStyles.svelte";
+  import "toastify-js/src/toastify.css";
+  import { Route, router } from "tinro";
+  router.subscribe((routeInfo) => {
+    window.scrollTo(0, 0);
+  });
+  if (config.prefersHashRouting) {
+    if (config.prefersHashRouting === true) {
+      router.useHashNavigation();
+    }
+  }
+  import localForage from "localforage";
  import { addMessages, init, getLocaleFromNavigator } from "svelte-i18n";
-  import en from "./locales/en";
-  import de from "./locales/de";
+  import en from "./locales/en.json";
+  import de from "./locales/de.json";
  addMessages("en", en);
  addMessages("de", de);
  init({
    fallbackLocale: "en",
    initialLocale: getLocaleFromNavigator(),
  });
+  localForage.config({
+    name: "lfk_admin",
+    version: 1.0,
+    storeName: "lfk_admin",
+    description: "LfK! admin dashbaord",
+  });
  //
  import Login from "./components/Login.svelte";
  import Dashboard from "./components/Dashboard.svelte";
  import store from "./store.js";
+  import NotFound from "./components/NotFound.svelte";
+  import ForgotPassword from "./components/ForgotPassword.svelte";
+  import MainDashContent from "./components/MainDashContent.svelte";
+  import Users from "./components/Users.svelte";
+  import About from "./components/About.svelte";
+  import Settings from "./components/Settings.svelte";
+  import Transition from "./components/Transition.svelte";
+  import Orgs from "./components/Orgs.svelte";
+  import Runners from "./components/Runners.svelte";
+  import Footer from "./components/Footer.svelte";
+  import Tracks from "./components/Tracks.svelte";
+  import TracksOverview from "./components/TracksOverview.svelte";
+  import OrgDetail from "./components/OrgDetail.svelte";
+  import Teams from "./components/Teams.svelte";
+  import { OpenAPI, AuthService } from "@odit/lfk-client-js";
+  import UserDetail from "./components/UserDetail.svelte";
+  OpenAPI.BASE = config.baseurl;
+  import { register as registerSW } from "./swmodule";
  store.init();
-  $: logged_in = $store.isLoggedIn;
+  registerSW();
 </script>

-{#if logged_in === true}
-  <Dashboard />
-{:else}
-  <Login />
-{/if}
+<Route>
+  {#if $router.path === '/forgot_password'}
+    <Route path="/forgot_password">
+      <ForgotPassword />
+    </Route>
+  {:else if $router.path === '/about'}
+    <Route path="/about">
+      <About />
+    </Route>
+  {:else if $store.isLoggedIn}
+    <Dashboard>
+      <Transition>
+        <Route path="/">
+          <MainDashContent />
+        </Route>
+        <Route path="/users/*">
+          <Route path="/">
+            <Users />
+          </Route>
+          <Route path="/:userid" let:params>
+            <UserDetail {params} />
+          </Route>
+        </Route>
+        <Route path="/tracks/*">
+          <Route path="/">
+            <TracksOverview />
+          </Route>
+          <Route path="/:trackid" let:params />
+        </Route>
+        <Route path="/runners">
+          <Runners />
+        </Route>
+        <Route path="/teams">
+          <Teams />
+        </Route>
+        <Route path="/orgs/*">
+          <Route path="/">
+            <Orgs />
+          </Route>
+          <Route path="/:orgid" let:params>
+            <OrgDetail {params} />
+          </Route>
+        </Route>
+        <Route path="/about">
+          <About />
+        </Route>
+        <Route path="/settings">
+          <Settings />
+        </Route>
+      </Transition>
+      <Footer />
+    </Dashboard>
+  {:else}
+    <Login />
+  {/if}
+</Route>
--- a/src/TailwindStyles.svelte
+++ b/src/TailwindStyles.svelte
@@ -0,0 +1,6 @@
+<style global>
+  /*! @import */
+  @tailwind base;
+  @tailwind components;
+  @tailwind utilities;
+</style>
--- a/src/components/About.svelte
+++ b/src/components/About.svelte
@@ -0,0 +1,194 @@
+<script>
+  import { _ } from "svelte-i18n";
+  import { clickOutside } from "./outsideclick";
+  import { focusTrap } from "svelte-focus-trap";
+  export let modal_open;
+  (function () {
+    document.onkeydown = function (e) {
+      e = e || window.event;
+      if (e.key === "Escape") {
+        modal_open = false;
+      }
+    };
+  })();
+  const license_promise = fetch("/licenses.json");
+  let licenses = [];
+  $: currentlicense = "";
+  $: licensetext = "";
+  license_promise
+    .then((response) => response.json())
+    .then((json) => {
+      licenses = json;
+    });
+</script>
+
+{#if modal_open}
+  <div
+    class="fixed z-10 inset-0 overflow-y-auto"
+    use:focusTrap
+    use:clickOutside
+    on:click_outside={() => {
+      modal_open = false;
+    }}>
+    <div
+      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
+      <div class="fixed inset-0 transition-opacity" aria-hidden="true">
+        <div
+          class="absolute inset-0 bg-gray-500 opacity-75"
+          data-id="modal_backdrop" />
+      </div>
+      <span
+        class="hidden sm:inline-block sm:align-middle sm:h-screen"
+        aria-hidden="true">&#8203;</span>
+      <div
+        class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="modal-headline">
+        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+          <div class="sm:flex sm:items-start">
+            <div
+              class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10">
+              <svg
+                fill="currentColor"
+                class="h-6 w-6 text-blue-600"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+                width="24"
+                height="24"><path fill="none" d="M0 0h24v24H0z" />
+                <path
+                  d="M14 20v2H2v-2h12zM14.586.686l7.778 7.778L20.95 9.88l-1.06-.354L17.413 12l5.657 5.657-1.414 1.414L16 13.414l-2.404 2.404.283 1.132-1.415 1.414-7.778-7.778 1.415-1.414 1.13.282 6.294-6.293-.353-1.06L14.586.686z" /></svg>
+            </div>
+            <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+              <h3 class="text-lg leading-6 font-medium">
+                {$_('read-license')}
+              </h3>
+              <div class="mt-2 mb-6">
+                <p class="text-sm text-gray-500">{currentlicense}</p>
+              </div>
+              <div class="mt-2 mb-6">
+                <p class="text-sm text-gray-500">{licensetext}</p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
+          <button
+            on:click={() => {
+              modal_open = false;
+            }}
+            type="button"
+            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">
+            {$_('close')}
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+{/if}
+<!-- /// -->
+<div class="pt-12 px-4 sm:px-6 lg:px-8 lg:pt-20 bg-gray-900 pb-12">
+  <div class="text-center mb-8">
+    <h1
+      class="mt-9 font-display text-4xl leading-none font-semibold text-white sm:text-5xl lg:text-6xl">
+      {$_('about')}
+      🧾
+    </h1>
+    <p
+      class="mt-2 max-w-xl mx-auto text-xl lg:max-w-3xl lg:text-2xl text-gray-300">
+      Lauf für Kaya!
+      <strong class="text-white font-medium">
+        {$_('by')}
+        <a href="https://odit.services" class="underline">ODIT.Services</a>
+      </strong>
+      <br />
+      <span class="text-lg">{$_('lfk-is-os')}</span>
+    </p>
+  </div>
+</div>
+
+<div class="pt-0 pb-16 overflow-hidden lg:pt-12 lg:py-24">
+  <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
+    <h2 class="text-4xl font-display font-semibold md:text-5xl">
+      {$_('credits')}
+    </h2>
+    <div class="max-w-3xl mx-auto text-xl leading-8 font-medium mt-8">
+      <p class="text-center">{$_('oss_credit_description')}</p>
+    </div>
+    <div class="w-screen leading-8 pl-5 mt-5">
+      {#await license_promise}
+        <p class="text-center w-full">{$_('licenses-are-being-loaded')}</p>
+      {:then}
+        <table>
+          <thead>
+            <tr>
+              <th>{$_('dependency_name')}</th>
+              <th>{$_('license')}</th>
+              <th>{$_('repo_link')}</th>
+              <th>{$_('installed-version')}</th>
+              <th>{$_('author')}</th>
+            </tr>
+          </thead>
+          <tbody>
+            {#each licenses as l}
+              <tr>
+                <td>{l.name}</td>
+                <td>
+                  {l.license || '?'}<br /><span
+                    class="underline cursor-pointer"
+                    on:click={() => {
+                      modal_open = true;
+                      currentlicense = l.name + '@' + l.version;
+                      licensetext = l.licensetext || $_('no-license-text-could-be-found');
+                    }}>{$_('read-license')}</span>
+                </td>
+                <td>
+                  {(l.repo?.url || l.repo)
+                    .replace('git+', '')
+                    .replace('git://', '')}
+                </td>
+                <td>{l.version || '?'}</td>
+                <td>{l.author?.name || l.author || '?'}</td>
+              </tr>
+            {/each}
+          </tbody>
+        </table>
+      {:catch error}
+        <div
+          class="text-white px-6 py-4 border-0 rounded relative mb-4 bg-red-500">
+          <span class="inline-block align-middle mr-8">
+            <b class="capitalize">{$_('general_promise_error')}</b>
+            {error}
+          </span>
+        </div>
+      {/await}
+    </div>
+    <h2 class="text-4xl font-display font-semibold md:text-5xl">{$_('faq')}</h2>
+    <div class="mt-6 border-t-2 border-gray-100 pt-10">
+      <dl class="md:grid md:grid-cols-2 md:gap-8">
+        <div>
+          <div>
+            <dt class="text-lg leading-6 font-medium">Q</dt>
+            <dd class="mt-2">
+              <p class="text-base text-gray-500">A</p>
+            </dd>
+          </div>
+        </div>
+        <div class="mt-12 sm:mt-0">
+          <div id="team-pricing">
+            <dt class="text-lg leading-6 font-medium">Q</dt>
+            <dd class="mt-2">
+              <p class="text-base text-gray-500">A</p>
+            </dd>
+          </div>
+          <div class="mt-12">
+            <dt class="text-lg leading-6 font-medium">Q</dt>
+            <dd class="mt-2">
+              <p class="text-base text-gray-500">A</p>
+            </dd>
+          </div>
+        </div>
+      </dl>
+    </div>
+  </div>
+</div>
--- a/src/components/AddTrackModal.svelte
+++ b/src/components/AddTrackModal.svelte
@@ -0,0 +1,224 @@
+<script>
+  import { _ } from "svelte-i18n";
+  import { clickOutside } from "./outsideclick";
+  import { focusTrap } from "svelte-focus-trap";
+  import { tracks as tracksstore } from "../store.js";
+  import { TrackService } from "@odit/lfk-client-js";
+  import Toastify from "toastify-js";
+  import "toastify-js/src/toastify.css";
+  export let modal_open;
+  let trackname_input;
+  function focus(el) {
+    el.focus();
+  }
+  $: trackname_input_value = "";
+  $: track_min_duration = 0;
+  $: tracklength = 0;
+  $: processed_last_submit = true;
+  $: smart_track_min_duration_placeholder = parseInt(tracklength || 0) * 0.369;
+  $: isTracknameValid = trackname_input_value.trim().length === 0;
+  $: isTracklengthValid = tracklength <= 0;
+  $: trackMintimevalid = track_min_duration >= 0;
+  $: createbtnenabled = !isTracknameValid && !isTracklengthValid;
+  (function () {
+    document.onkeydown = function (e) {
+      e = e || window.event;
+      if (e.key === "Escape") {
+        modal_open = false;
+      }
+      if (e.keyCode === 13) {
+        if (createbtnenabled === true) {
+          createbtnenabled = false;
+          submit();
+        }
+      }
+    };
+  })();
+  function submit() {
+    if (processed_last_submit === true) {
+      processed_last_submit = false;
+      const toast = Toastify({
+        text: $_("track-is-being-added"),
+        duration: -1,
+      }).showToast();
+      TrackService.trackControllerPost({
+        distance: parseInt(tracklength),
+        name: trackname_input_value,
+        minimumLapTime: track_min_duration,
+      })
+        .then((result) => {
+          trackname_input_value = "";
+          track_min_duration = 0;
+          tracklength = 0;
+          modal_open = false;
+          //
+          Toastify({
+            text: $_("track-added"),
+            duration: 500,
+            backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
+          }).showToast();
+          let storeval = [];
+          tracksstore.subscribe((val) => {
+            storeval = val;
+          });
+          storeval.push(result);
+          tracksstore.set(storeval);
+        })
+        .catch((err) => {
+          //
+        })
+        .finally(() => {
+          processed_last_submit = true;
+          //
+          toast.hideToast();
+        });
+    }
+  }
+</script>
+
+{#if modal_open}
+  <div
+    class="fixed z-10 inset-0 overflow-y-auto"
+    use:focusTrap
+    use:clickOutside
+    on:click_outside={() => {
+      modal_open = false;
+    }}>
+    <div
+      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
+      <div class="fixed inset-0 transition-opacity" aria-hidden="true">
+        <div
+          class="absolute inset-0 bg-gray-500 opacity-75"
+          data-id="modal_backdrop" />
+      </div>
+      <span
+        class="hidden sm:inline-block sm:align-middle sm:h-screen"
+        aria-hidden="true">&#8203;</span>
+      <div
+        class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="modal-headline">
+        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+          <div class="sm:flex sm:items-start">
+            <div
+              class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10">
+              <svg
+                class="h-6 w-6 text-blue-600"
+                fill="none"
+                width="24"
+                height="24"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 640 512"><path
+                  fill="currentColor"
+                  d="M635.7 167.2L556.1 31.7c-8.8-15-28.3-20.1-43.5-11.5l-69 39.1L503.3 161c2.2 3.8.9 8.5-2.9 10.7l-13.8 7.8c-3.8 2.2-8.7.9-10.9-2.9L416 75l-55.2 31.3 27.9 47.4c2.2 3.8.9 8.5-2.9 10.7l-13.8 7.8c-3.8 2.2-8.7.9-10.9-2.9L333.2 122 278 153.3 337.8 255c2.2 3.7.9 8.5-2.9 10.7l-13.8 7.8c-3.8 2.2-8.7.9-10.9-2.9l-59.7-101.7-55.2 31.3 27.9 47.4c2.2 3.8.9 8.5-2.9 10.7l-13.8 7.8c-3.8 2.2-8.7.9-10.9-2.9l-27.9-47.5-55.2 31.3 59.7 101.7c2.2 3.7.9 8.5-2.9 10.7l-13.8 7.8c-3.8 2.2-8.7.9-10.9-2.9L84.9 262.9l-69 39.1C.7 310.7-4.6 329.8 4.2 344.8l79.6 135.6c8.8 15 28.3 20.1 43.5 11.5L624.1 210c15.2-8.6 20.4-27.8 11.6-42.8z" /></svg>
+            </div>
+            <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+              <h3 class="text-lg leading-6 font-medium text-gray-900">
+                {$_('create-a-new-track')}
+              </h3>
+              <div class="mt-2 mb-6">
+                <p class="text-sm text-gray-500">
+                  {$_('please-provide-the-required-information-to-add-a-new-track')}
+                </p>
+              </div>
+              <div class="grid grid-cols-6 gap-6">
+                <div class="col-span-6">
+                  <label
+                    for="trackname"
+                    class="block text-sm font-medium text-gray-700">{$_('track-name')}</label>
+                  <input
+                    use:focus
+                    autocomplete="off"
+                    placeholder={$_('track-name')}
+                    class:border-red-500={isTracknameValid}
+                    class:focus:border-red-500={isTracknameValid}
+                    class:focus:ring-red-500={isTracknameValid}
+                    bind:value={trackname_input_value}
+                    bind:this={trackname_input}
+                    type="text"
+                    name="trackname"
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
+                  {#if isTracknameValid}
+                    <span
+                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+                      Track name must not be empty
+                    </span>
+                  {/if}
+                </div>
+                <div class="col-span-6">
+                  <label
+                    for="track_length_m"
+                    class="block text-sm font-medium text-gray-700">{$_('track-length-in-m')}</label>
+                  <div class="mt-1 flex rounded-md shadow-sm">
+                    <input
+                      autocomplete="off"
+                      class:border-red-500={isTracklengthValid}
+                      class:focus:border-red-500={isTracklengthValid}
+                      class:focus:ring-red-500={isTracklengthValid}
+                      bind:value={tracklength}
+                      type="number"
+                      name="track_length_m"
+                      class="focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-none rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 p-2"
+                      placeholder="1000" />
+                    <span
+                      class="inline-flex items-center px-3 rounded-r-md border border-gray-300 bg-gray-50 text-gray-500 text-sm">m</span>
+                  </div>
+                  {#if isTracklengthValid}
+                    <span
+                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+                      Track length must be greater than 0
+                    </span>
+                  {/if}
+                </div>
+                <div class="col-span-6">
+                  <label
+                    for="track_min_duration"
+                    class="block text-sm font-medium text-gray-700">{$_('minimum-lap-time-in-s')}</label>
+                  <div class="mt-1 flex rounded-md shadow-sm">
+                    <input
+                      autocomplete="off"
+                      class:border-red-500={!trackMintimevalid}
+                      class:focus:border-red-500={!trackMintimevalid}
+                      class:focus:ring-red-500={!trackMintimevalid}
+                      bind:value={track_min_duration}
+                      type="number"
+                      name="track_min_duration"
+                      class="focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-none rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 p-2"
+                      placeholder={smart_track_min_duration_placeholder} />
+                    <span
+                      class="inline-flex items-center px-3 rounded-r-md border border-gray-300 bg-gray-50 text-gray-500 text-sm">s</span>
+                  </div>
+                  {#if !trackMintimevalid}
+                    <span
+                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+                      minimum lap time must be a positive number or 0
+                    </span>
+                  {/if}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
+          <button
+            disabled={!createbtnenabled}
+            class:opacity-50={!createbtnenabled}
+            on:click={submit}
+            type="button"
+            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">
+            Create
+          </button>
+          <button
+            on:click={() => {
+              modal_open = false;
+            }}
+            type="button"
+            class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
+            Cancel
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+{/if}
--- a/src/components/AddUserModal.svelte
+++ b/src/components/AddUserModal.svelte
@@ -0,0 +1,263 @@
+<script>
+  import { _ } from "svelte-i18n";
+  import { clickOutside } from "./outsideclick";
+  import { focusTrap } from "svelte-focus-trap";
+  import { tracks as usersstore } from "../store.js";
+  import { UserService } from "@odit/lfk-client-js";
+  import isEmail from "validator/es/lib/isEmail";
+  import Toastify from "toastify-js";
+  import "toastify-js/src/toastify.css";
+  export let modal_open;
+  let firstname_input;
+  let lastname_input;
+  let middlename_input;
+  let password_input;
+  let email_input;
+  function focus(el) {
+    el.focus();
+  }
+  $: middlename_input_value = "";
+  $: password_input_value = "";
+  $: email_input_value = "";
+  $: lastname_input_value = "";
+  $: firstname_input_value = "";
+  $: processed_last_submit = true;
+  $: isPasswordValid = password_input_value.trim().length !== 0;
+  $: isEmailValid = isEmail(email_input_value);
+  $: isLastnameValid = lastname_input_value.trim().length !== 0;
+  $: isFirstnameValid = firstname_input_value.trim().length !== 0;
+  $: createbtnenabled =
+    isFirstnameValid && isLastnameValid && isEmailValid && isPasswordValid;
+  (function () {
+    document.onkeydown = function (e) {
+      e = e || window.event;
+      if (e.key === "Escape") {
+        modal_open = false;
+      }
+      if (e.keyCode === 13) {
+        if (createbtnenabled === true) {
+          createbtnenabled = false;
+          submit();
+        }
+      }
+    };
+  })();
+  function submit() {
+    if (processed_last_submit === true) {
+      processed_last_submit = false;
+      const toast = Toastify({
+        text: "User is being added...",
+        duration: -1,
+      }).showToast();
+      UserService.userControllerPost({
+        firstname: firstname_input_value,
+        lastname: lastname_input_value,
+        middlename: middlename_input_value,
+        email: email_input_value,
+        password: password_input_value,
+      })
+        .then((result) => {
+          firstname_input_value = "";
+          lastname_input_value = "";
+          middlename_input_value = "";
+          modal_open = false;
+          //
+          Toastify({
+            text: "User added",
+            duration: 500,
+            backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
+          }).showToast();
+          let storeval = [];
+          usersstore.subscribe((val) => {
+            storeval = val;
+          });
+          storeval.push(result);
+          usersstore.set(storeval);
+        })
+        .catch((err) => {
+          //
+        })
+        .finally(() => {
+          processed_last_submit = true;
+          //
+          toast.hideToast();
+        });
+    }
+  }
+</script>
+
+{#if modal_open}
+  <div
+    class="fixed z-10 inset-0 overflow-y-auto"
+    use:focusTrap
+    use:clickOutside
+    on:click_outside={() => {
+      modal_open = false;
+    }}>
+    <div
+      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
+      <div class="fixed inset-0 transition-opacity" aria-hidden="true">
+        <div
+          class="absolute inset-0 bg-gray-500 opacity-75"
+          data-id="modal_backdrop" />
+      </div>
+      <span
+        class="hidden sm:inline-block sm:align-middle sm:h-screen"
+        aria-hidden="true">&#8203;</span>
+      <div
+        class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="modal-headline">
+        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+          <div class="sm:flex sm:items-start">
+            <div
+              class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10">
+              <svg
+                class="h-6 w-6 text-blue-600"
+                fill="currentColor"
+                width="24"
+                height="24"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 640 512"><path
+                  fill="currentColor"
+                  d="M610.5 341.3c2.6-14.1 2.6-28.5 0-42.6l25.8-14.9c3-1.7 4.3-5.2 3.3-8.5-6.7-21.6-18.2-41.2-33.2-57.4-2.3-2.5-6-3.1-9-1.4l-25.8 14.9c-10.9-9.3-23.4-16.5-36.9-21.3v-29.8c0-3.4-2.4-6.4-5.7-7.1-22.3-5-45-4.8-66.2 0-3.3.7-5.7 3.7-5.7 7.1v29.8c-13.5 4.8-26 12-36.9 21.3l-25.8-14.9c-2.9-1.7-6.7-1.1-9 1.4-15 16.2-26.5 35.8-33.2 57.4-1 3.3.4 6.8 3.3 8.5l25.8 14.9c-2.6 14.1-2.6 28.5 0 42.6l-25.8 14.9c-3 1.7-4.3 5.2-3.3 8.5 6.7 21.6 18.2 41.1 33.2 57.4 2.3 2.5 6 3.1 9 1.4l25.8-14.9c10.9 9.3 23.4 16.5 36.9 21.3v29.8c0 3.4 2.4 6.4 5.7 7.1 22.3 5 45 4.8 66.2 0 3.3-.7 5.7-3.7 5.7-7.1v-29.8c13.5-4.8 26-12 36.9-21.3l25.8 14.9c2.9 1.7 6.7 1.1 9-1.4 15-16.2 26.5-35.8 33.2-57.4 1-3.3-.4-6.8-3.3-8.5l-25.8-14.9zM496 368.5c-26.8 0-48.5-21.8-48.5-48.5s21.8-48.5 48.5-48.5 48.5 21.8 48.5 48.5-21.7 48.5-48.5 48.5zM96 224c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm224 32c1.9 0 3.7-.5 5.6-.6 8.3-21.7 20.5-42.1 36.3-59.2 7.4-8 17.9-12.6 28.9-12.6 6.9 0 13.7 1.8 19.6 5.3l7.9 4.6c.8-.5 1.6-.9 2.4-1.4 7-14.6 11.2-30.8 11.2-48 0-61.9-50.1-112-112-112S208 82.1 208 144c0 61.9 50.1 112 112 112zm105.2 194.5c-2.3-1.2-4.6-2.6-6.8-3.9-8.2 4.8-15.3 9.8-27.5 9.8-10.9 0-21.4-4.6-28.9-12.6-18.3-19.8-32.3-43.9-40.2-69.6-10.7-34.5 24.9-49.7 25.8-50.3-.1-2.6-.1-5.2 0-7.8l-7.9-4.6c-3.8-2.2-7-5-9.8-8.1-3.3.2-6.5.6-9.8.6-24.6 0-47.6-6-68.5-16h-8.3C179.6 288 128 339.6 128 403.2V432c0 26.5 21.5 48 48 48h255.4c-3.7-6-6.2-12.8-6.2-20.3v-9.2zM173.1 274.6C161.5 263.1 145.6 256 128 256H64c-35.3 0-64 28.7-64 64v32c0 17.7 14.3 32 32 32h65.9c6.3-47.4 34.9-87.3 75.2-109.4z" /></svg>
+            </div>
+            <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+              <h3 class="text-lg leading-6 font-medium text-gray-900">
+                Create a new User
+              </h3>
+              <div class="mt-2 mb-6">
+                <p class="text-sm text-gray-500">
+                  Please provide the required information to add a new user.
+                </p>
+              </div>
+              <div class="grid grid-cols-6 gap-6">
+                <div class="col-span-6">
+                  <label
+                    for="firstname"
+                    class="block text-sm font-medium text-gray-700">{$_('first-name')}</label>
+                  <input
+                    use:focus
+                    autocomplete="off"
+                    placeholder={$_('first-name')}
+                    class:border-red-500={!isFirstnameValid}
+                    class:focus:border-red-500={!isFirstnameValid}
+                    class:focus:ring-red-500={!isFirstnameValid}
+                    bind:value={firstname_input_value}
+                    bind:this={firstname_input}
+                    type="text"
+                    name="firstname"
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
+                  {#if !isFirstnameValid}
+                    <span
+                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+                      {$_('first-name-is-required')}
+                    </span>
+                  {/if}
+                </div>
+                <div class="col-span-6">
+                  <label
+                    for="trackname"
+                    class="block text-sm font-medium text-gray-700">{$_('middle-name')}</label>
+                  <input
+                    autocomplete="off"
+                    placeholder={$_('middle-name')}
+                    bind:value={middlename_input_value}
+                    bind:this={middlename_input}
+                    type="text"
+                    name="trackname"
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
+                </div>
+                <div class="col-span-6">
+                  <label
+                    for="lastname"
+                    class="block text-sm font-medium text-gray-700">Last Name</label>
+                  <input
+                    autocomplete="off"
+                    placeholder="Last Name"
+                    class:border-red-500={!isLastnameValid}
+                    class:focus:border-red-500={!isLastnameValid}
+                    class:focus:ring-red-500={!isLastnameValid}
+                    bind:value={lastname_input_value}
+                    bind:this={lastname_input}
+                    type="text"
+                    name="lastname"
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
+                  {#if !isLastnameValid}
+                    <span
+                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+                      {$_('last-name-is-required')}
+                    </span>
+                  {/if}
+                </div>
+                <div class="col-span-6">
+                  <label
+                    for="password"
+                    class="block text-sm font-medium text-gray-700">{$_('password')}</label>
+                  <input
+                    autocomplete="off"
+                    placeholder={$_('password')}
+                    class:border-red-500={!isPasswordValid}
+                    class:focus:border-red-500={!isPasswordValid}
+                    class:focus:ring-red-500={!isPasswordValid}
+                    bind:value={password_input_value}
+                    bind:this={password_input}
+                    type="password"
+                    name="password"
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
+                  {#if !isPasswordValid}
+                    <span
+                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+                      {$_('password-is-required')}
+                    </span>
+                  {/if}
+                </div>
+                <div class="col-span-6">
+                  <label
+                    for="email"
+                    class="block text-sm font-medium text-gray-700">{$_('e-mail-adress')}</label>
+                  <input
+                    autocomplete="off"
+                    placeholder={$_('e-mail-adress')}
+                    class:border-red-500={!isEmailValid}
+                    class:focus:border-red-500={!isEmailValid}
+                    class:focus:ring-red-500={!isEmailValid}
+                    bind:value={email_input_value}
+                    bind:this={email_input}
+                    type="email"
+                    name="email"
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
+                  {#if !isEmailValid}
+                    <span
+                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+                      {$_('valid-email-is-required')}
+                    </span>
+                  {/if}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
+          <button
+            disabled={!createbtnenabled}
+            class:opacity-50={!createbtnenabled}
+            on:click={submit}
+            type="button"
+            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">
+            {$_('create')}
+          </button>
+          <button
+            on:click={() => {
+              modal_open = false;
+            }}
+            type="button"
+            class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
+            {$_('cancel')}
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+{/if}
--- a/src/components/Avatars.svelte
+++ b/src/components/Avatars.svelte
@@ -0,0 +1,80 @@
+<h3 class="text-lg">Standard Avatars</h3>
+<div class="relative rounded-full w-4 h-4">
+  <img
+    alt=""
+    src="https://gustui.s3.amazonaws.com/avatar.png"
+    class="absolute left-0 top-0 w-full h-full rounded-full object-cover" />
+</div>
+<div class="relative rounded-full w-8 h-8">
+  <img
+    alt=""
+    src="https://gustui.s3.amazonaws.com/avatar.png"
+    class="absolute left-0 top-0 w-full h-full rounded-full object-cover" />
+</div>
+<div class="relative rounded-full w-12 h-12">
+  <img
+    alt=""
+    src="https://gustui.s3.amazonaws.com/avatar.png"
+    class="absolute left-0 top-0 w-full h-full rounded-full object-cover" />
+</div>
+<div class="relative rounded-full w-16 h-16">
+  <img
+    alt=""
+    src="https://gustui.s3.amazonaws.com/avatar.png"
+    class="absolute left-0 top-0 w-full h-full rounded-full object-cover" />
+</div>
+<div class="relative rounded-full w-20 h-20">
+  <img
+    alt=""
+    src="https://gustui.s3.amazonaws.com/avatar.png"
+    class="absolute left-0 top-0 w-full h-full rounded-full object-cover" />
+</div>
+<div class="relative rounded-full w-24 h-24">
+  <img
+    alt=""
+    src="https://gustui.s3.amazonaws.com/avatar.png"
+    class="absolute left-0 top-0 w-full h-full rounded-full object-cover" />
+</div>
+<h3 class="text-lg">Status Avatars</h3>
+<div class="relative rounded-full w-4 h-4">
+  <img
+    alt=""
+    src="https://gustui.s3.amazonaws.com/avatar.png"
+    class="absolute left-0 top-0 w-full h-full rounded-full object-cover" />
+  <div class="absolute rounded-full right-0 bottom-0 w-1 h-1 bg-gray-200" />
+</div>
+<div class="relative rounded-full w-8 h-8">
+  <img
+    alt=""
+    src="https://gustui.s3.amazonaws.com/avatar.png"
+    class="absolute left-0 top-0 w-full h-full rounded-full object-cover" />
+  <div class="absolute rounded-full right-0 bottom-0 w-2 h-2 bg-green-400" />
+</div>
+<div class="relative rounded-full w-12 h-12">
+  <img
+    alt=""
+    src="https://gustui.s3.amazonaws.com/avatar.png"
+    class="absolute left-0 top-0 w-full h-full rounded-full object-cover" />
+  <div class="absolute rounded-full right-0 bottom-0 w-4 h-4 bg-red-600" />
+</div>
+<div class="relative rounded-full w-16 h-16">
+  <img
+    alt=""
+    src="https://gustui.s3.amazonaws.com/avatar.png"
+    class="absolute left-0 top-0 w-full h-full rounded-full object-cover" />
+  <div class="absolute rounded-full right-0 bottom-0 w-5 h-5 bg-gray-200" />
+</div>
+<div class="relative rounded-full w-20 h-20">
+  <img
+    alt=""
+    src="https://gustui.s3.amazonaws.com/avatar.png"
+    class="absolute left-0 top-0 w-full h-full rounded-full object-cover" />
+  <div class="absolute rounded-full right-0 bottom-0 w-6 h-6 bg-green-400" />
+</div>
+<div class="relative rounded-full w-24 h-24">
+  <img
+    alt=""
+    src="https://gustui.s3.amazonaws.com/avatar.png"
+    class="absolute left-0 top-0 w-full h-full rounded-full object-cover" />
+  <div class="absolute rounded-full right-0 bottom-0 w-6 h-6 bg-red-600" />
+</div>
--- a/src/components/Badges.svelte
+++ b/src/components/Badges.svelte
@@ -0,0 +1,53 @@
+<h3 class="text-lg">badges</h3>
+<span
+  class="text-sm font-medium bg-green-100 py-1 px-2 rounded text-green-500 align-middle">Paid</span>
+<span
+  class="text-sm font-medium bg-red-100 py-1 px-2 rounded text-red-500 align-middle">Overdue</span>
+<span
+  class="rounded-sm py-1 px-2 text-xs font-medium text-white bg-blue-600">Primary</span>
+<span
+  class="rounded-sm py-1 px-2 text-xs font-medium text-white bg-gray-600">Secondary</span>
+<span
+  class="rounded-sm py-1 px-2 text-xs font-medium text-white bg-green-600">Success</span>
+<span
+  class="rounded-sm py-1 px-2 text-xs font-medium text-white bg-red-600">Danger</span>
+<span
+  class="rounded-sm py-1 px-2 text-xs font-medium text-black bg-yellow-400">Warning</span>
+<span
+  class="rounded-sm py-1 px-2 text-xs font-medium text-white bg-indigo-300">Info</span>
+<span
+  class="rounded-sm py-1 px-2 text-xs font-medium text-black bg-gray-200">Light</span>
+<span
+  class="rounded-sm py-1 px-2 text-xs font-medium text-white bg-gray-900">Dark</span>
+<h3 class="text-lg">closable badges</h3>
+<span class="rounded-sm py-1 px-2 text-xs font-medium text-white bg-blue-600">
+  Primary
+  <span class="ml-2 text-base cursor-pointer">×</span>
+</span>
+<span class="rounded-sm py-1 px-2 text-xs font-medium text-white bg-gray-600">
+  Secondary
+  <span class="ml-2 text-base cursor-pointer">×</span>
+</span>
+<span class="rounded-sm py-1 px-2 text-xs font-medium text-white bg-green-600">
+  Success
+  <span class="ml-2 text-base cursor-pointer">×</span>
+</span>
+<span class="rounded-sm py-1 px-2 text-xs font-medium text-white bg-red-600">
+  Danger
+  <span class="ml-2 text-base cursor-pointer">×</span>
+</span>
+<span class="rounded-sm py-1 px-2 text-xs font-medium text-black bg-yellow-400">
+  Warning
+  <span class="ml-2 text-base cursor-pointer">×</span>
+</span>
+<span class="rounded-sm py-1 px-2 text-xs font-medium text-white bg-indigo-300">
+  Info
+  <span class="ml-2 text-base cursor-pointer">×</span>
+</span>
+<span class="rounded-sm py-1 px-2 text-xs font-medium text-black bg-gray-200">
+  Light<span class="ml-2 text-base cursor-pointer">×</span>
+</span>
+<span class="rounded-sm py-1 px-2 text-xs font-medium text-white bg-gray-900">
+  Dark
+  <span class="ml-2 text-base cursor-pointer">×</span>
+</span>
--- a/src/components/ComponentDump.svelte
+++ b/src/components/ComponentDump.svelte
@@ -0,0 +1,75 @@
+<script>
+  import Avatars from "./Avatars.svelte";
+  import Badges from "./Badges.svelte";
+  import BreadcrumbNav from "./BreadcrumbNav.svelte";
+  import FileUpload from "./FileUpload.svelte";
+  import Pagination from "./Pagination.svelte";
+  import Table from "./Table.svelte";
+  import Tabs from "./Tabs.svelte";
+  import Tags from "./Tags.svelte";
+</script>
+
+<div class="border-4 border-dashed rounded h-96 mb-4" />
+<div class="mb-8">
+  <FileUpload />
+</div>
+<div class="mb-8">
+  <Tabs />
+</div>
+<div class="mb-8">
+  <Tags />
+</div>
+<div class="mb-8">
+  <Badges />
+</div>
+<div class="mb-8">
+  <Avatars />
+</div>
+<Pagination />
+<div class="mb-8">
+  <Table />
+</div>
+<div
+  class="widget w-full p-4 mb-4 rounded-lg bg-white border border-grey-100 dark:bg-grey-895 dark:border-grey-890">
+  <div class="flex flex-row items-center justify-between mb-6">
+    <div class="flex flex-col">
+      <div class="text-sm font-light text-grey-500">Regular</div>
+      <div class="text-sm font-bold"><span>Text inputs</span></div>
+    </div>
+  </div>
+  <div class="flex flex-col lg:flex-row lg:flex-wrap w-full lg:space-x-4">
+    <div class="w-full lg:w-1/4">
+      <div class="form-element ">
+        <div class="form-label">Label</div><input
+          name="name"
+          type="text"
+          class="form-input"
+          placeholder="Enter something..." />
+        <div class="form-hint">This is a hint</div>
+      </div>
+    </div>
+    <div class="w-full lg:w-1/4">
+      <div class="form-element ">
+        <div class="form-label">First name</div><input
+          name="name"
+          type="text"
+          class="form-input form-input-invalid"
+          placeholder="john@example.com" />
+        <div class="form-error">First name is required</div>
+      </div>
+    </div>
+    <div class="w-full lg:w-1/4">
+      <div class="form-element ">
+        <div class="form-label">First name</div><input
+          name="name"
+          type="text"
+          class="form-input form-input-valid"
+          placeholder="john@example.com" />
+        <div class="form-success">First name is valid</div>
+      </div>
+    </div>
+  </div>
+</div>
+<div class="mb-8">
+  <BreadcrumbNav />
+</div>
--- a/src/components/Dash.svelte
+++ b/src/components/Dash.svelte
@@ -538,7 +538,7 @@
              stroke-linejoin="round" size="18" height="18" width="18" xmlns="http://www.w3.org/2000/svg">
              <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
            </svg><span
-              class="absolute uppercase font-bold inline-flex text-center p-0 leading-none text-2xs h-4 w-4 inline-flex items-center justify-center rounded-full bg-blue-500 text-white"
+              class="absolute uppercase font-bold inline-flex text-center p-0 leading-none text-2xs h-4 w-4 items-center justify-center rounded-full bg-blue-500 text-white"
              style="top:14px;right:8px">5</span></button>
          <div class="dropdown absolute top-0 right-0 mt-16 ">
            <div class="dropdown-content w-64 bottom-start">
@@ -659,7 +659,7 @@
        <div class="relative"><button class="flex h-16 w-8 rounded-full ml-2 relative"><span
              class="absolute top-0 left-0 pt-4"><img class="h-8 w-8 rounded-full shadow" src="/images/faces/m1.png"
                alt="avatar"><span
-                class="absolute uppercase font-bold inline-flex text-center p-0 leading-none text-2xs h-4 w-4 inline-flex items-center justify-center rounded-full bg-red-500 text-white shadow-outline-white"
+                class="absolute uppercase font-bold inline-flex text-center p-0 leading-none text-2xs h-4 w-4 items-center justify-center rounded-full bg-red-500 text-white shadow-outline-white"
                style="top:10px;right:-4px">2</span></span></button>
          <div class="dropdown absolute top-0 right-0 mt-16 ">
            <div class="dropdown-content w-48 bottom-end">
@@ -672,7 +672,7 @@
                        <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
                        <polyline points="22,6 12,13 2,6"></polyline>
                      </svg><span class="mx-2">Inbox</span><span
-                        class="uppercase font-bold inline-flex text-center p-0 leading-none text-2xs h-4 w-4 inline-flex items-center justify-center rounded-full bg-red-500 text-white ml-auto">2</span></a>
+                        class="uppercase font-bold inline-flex text-center p-0 leading-none text-2xs h-4 w-4 items-center justify-center rounded-full bg-red-500 text-white ml-auto">2</span></a>
                  </li>
                  <li class="dropdown-item"><a class="flex flex-row items-center justify-start h-10 w-full px-2"
                      href="/"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24"
@@ -682,7 +682,7 @@
                          points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2">
                        </polygon>
                      </svg><span class="mx-2">Messages</span><span
-                        class="uppercase font-bold inline-flex text-center p-0 leading-none text-2xs h-4 w-4 inline-flex items-center justify-center rounded-full bg-blue-500 text-white ml-auto">3</span></a>
+                        class="uppercase font-bold inline-flex text-center p-0 leading-none text-2xs h-4 w-4 items-center justify-center rounded-full bg-blue-500 text-white ml-auto">3</span></a>
                  </li>
                  <li class="dropdown-item"><a class="flex flex-row items-center justify-start h-10 w-full px-2"
                      href="/extras/user-profile"><svg stroke="currentColor" fill="none" stroke-width="2"
--- a/src/components/Dashboard.svelte
+++ b/src/components/Dashboard.svelte
@@ -1,296 +1,359 @@
 <script>
-  import StatCards from "./StatCards.svelte";
-  import Table from "./Table.svelte";
-  import Pagination from "./Pagination.svelte";
-  import FormLayout from "./FormLayout.svelte";
-  import Tracks from "./Tracks.svelte";
-  import BreadcrumbNav from "./BreadcrumbNav.svelte";
+  import { _ } from "svelte-i18n";
+  import { active } from "tinro";
+  import localForage from "localforage";
+  import { router } from "tinro";
+
+  import store from "../store";
+  import NoComponentLoaded from "./NoComponentLoaded.svelte";
+  import { AuthService, OpenAPI } from "@odit/lfk-client-js";
+
+  let activePage = "dashboard";
+  let dropdown1 = false;
+  let navOpen = false;
+  function ismobile() {
+    let check = false;
+    (function (a) {
+      if (
+        /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(
+          a
+        ) ||
+        /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(
+          a.substr(0, 4)
+        )
+      )
+        check = true;
+    })(navigator.userAgent || navigator.vendor || window.opera);
+    return check;
+  }
+  $: mobile = ismobile();
+  function logout() {
+    localForage.clear();
+    location.replace("/");
+  }
 </script>

-<div>
-  <nav class="bg-gray-800">
-    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-      <div class="flex items-center justify-between h-16">
-        <div class="flex items-center">
-          <div class="flex-shrink-0">
-            <img
-              class="h-8 w-8"
-              src="https://tailwindui.com/img/logos/workflow-mark-indigo-500.svg"
-              alt="Workflow" />
-          </div>
-          <div class="hidden md:block">
-            <div class="ml-10 flex items-baseline space-x-4">
-              <a
-                href="#"
-                class="bg-gray-900 text-white px-3 py-2 rounded-md text-sm font-medium">Dashboard</a>
-
-              <a
-                href="#"
-                class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Team</a>
-
-              <a
-                href="#"
-                class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Projects</a>
-
-              <a
-                href="#"
-                class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Calendar</a>
-
-              <a
-                href="#"
-                class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Reports</a>
-              <form class="w-full max-w-xs mr-2 navbar-search">
-                <div class="relative">
-                  <input
-                    type="search"
-                    name="search"
-                    placeholder="Search..."
-                    class="pl-10 pr-5 appearance-none h-10 w-full rounded-full text-sm focus:outline-none" /><button
-                    type="submit"
-                    class="absolute top-0 mt-3 left-0 ml-4"><svg
-                      stroke="currentColor"
-                      fill="none"
-                      stroke-width="2"
-                      viewBox="0 0 24 24"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      class="stroke-current h-4 w-4"
-                      height="1em"
-                      width="1em"
-                      xmlns="http://www.w3.org/2000/svg"><circle
-                        cx="11"
-                        cy="11"
-                        r="8" />
-                      <line
-                        x1="21"
-                        y1="21"
-                        x2="16.65"
-                        y2="16.65" /></svg></button>
-                </div>
-              </form>
-            </div>
-          </div>
-        </div>
-        <div class="hidden md:block">
-          <div class="ml-4 flex items-center md:ml-6">
-            <button
-              class="bg-gray-800 p-1 rounded-full text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white">
-              <span class="sr-only">View notifications</span>
-              <!-- Heroicon name: bell -->
-              <svg
-                class="h-6 w-6"
-                xmlns="http://www.w3.org/2000/svg"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-                aria-hidden="true">
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="2"
-                  d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
-              </svg>
-            </button>
-
-            <!-- Profile dropdown -->
-            <div class="ml-3 relative">
-              <div>
-                <button
-                  class="max-w-xs bg-gray-800 rounded-full flex items-center text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white"
-                  id="user-menu"
-                  aria-haspopup="true">
-                  <span class="sr-only">Open user menu</span>
-                  <img
-                    class="h-8 w-8 rounded-full"
-                    src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
-                    alt="" />
-                </button>
-              </div>
-              <!--
-                Profile dropdown panel, show/hide based on dropdown state.
-
-                Entering: "transition ease-out duration-100"
-                  From: "transform opacity-0 scale-95"
-                  To: "transform opacity-100 scale-100"
-                Leaving: "transition ease-in duration-75"
-                  From: "transform opacity-100 scale-100"
-                  To: "transform opacity-0 scale-95"
-              -->
-              <div
-                class="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5"
-                role="menu"
-                aria-orientation="vertical"
-                aria-labelledby="user-menu">
-                <a
-                  href="#"
-                  class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
-                  role="menuitem">Your Profile</a>
-
-                <a
-                  href="#"
-                  class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
-                  role="menuitem">Settings</a>
-
-                <a
-                  href="#"
-                  class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
-                  role="menuitem">Sign out</a>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="-mr-2 flex md:hidden">
-          <!-- Mobile menu button -->
-          <button
-            class="bg-gray-800 inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white">
-            <span class="sr-only">Open main menu</span>
-            <!--
-              Heroicon name: menu
-
-              Menu open: "hidden", Menu closed: "block"
-            -->
+<section class="min-h-screen bg-gray-50 dark:bg-black dark:text-gray-100">
+  <nav
+    class:hidden={!navOpen && mobile}
+    class="select-none fixed top-0 left-0 z-20 h-full pb-10 overflow-x-hidden overflow-y-auto transition origin-left transform border-r w-60 md:translate-x-0">
+    <a href="/" class="flex items-center px-4 py-5">
+      <img
+        src="/lfk-logo.png"
+        alt="Logo"
+        class="h-10" />
+      <h3 class="text-lg">Lauf für Kaya! Admin</h3>
+    </a>
+    <nav class="text-sm font-medium text-gray-600" aria-label="Main Navigation">
+      <a
+        class:dark:bg-gray-900={$router.path === '/'}
+        class:bg-gray-100={$router.path === '/'}
+        class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
+        href="/">
+        <svg
+          class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 20 20"
+          fill="currentColor">
+          <path
+            d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z" />
+        </svg>
+        <span>{$_('dashboard-title')}</span>
+      </a>
+      <a
+        class:dark:bg-gray-900={$router.path.includes('/orgs/')}
+        class:bg-gray-100={$router.path.includes('/orgs/')}
+        class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
+        href="/orgs/">
+        <svg
+          class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
+          fill="currentColor"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          width="24"
+          height="24"><path fill="none" d="M0 0h24v24H0z" />
+          <path
+            d="M17 19h2v-8h-6v8h2v-6h2v6zM3 19V4a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v5h2v10h1v2H2v-2h1zm4-8v2h2v-2H7zm0 4v2h2v-2H7zm0-8v2h2V7H7z" /></svg>
+        <span>{$_('orgs')}</span>
+      </a>
+      <a
+        class:dark:bg-gray-900={$router.path === '/users/'}
+        class:bg-gray-100={$router.path === '/users/'}
+        class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
+        href="/users/">
+        <svg
+          class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
+          fill="currentColor"
+          width="24"
+          height="24"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 640 512"><path
+            fill="currentColor"
+            d="M610.5 341.3c2.6-14.1 2.6-28.5 0-42.6l25.8-14.9c3-1.7 4.3-5.2 3.3-8.5-6.7-21.6-18.2-41.2-33.2-57.4-2.3-2.5-6-3.1-9-1.4l-25.8 14.9c-10.9-9.3-23.4-16.5-36.9-21.3v-29.8c0-3.4-2.4-6.4-5.7-7.1-22.3-5-45-4.8-66.2 0-3.3.7-5.7 3.7-5.7 7.1v29.8c-13.5 4.8-26 12-36.9 21.3l-25.8-14.9c-2.9-1.7-6.7-1.1-9 1.4-15 16.2-26.5 35.8-33.2 57.4-1 3.3.4 6.8 3.3 8.5l25.8 14.9c-2.6 14.1-2.6 28.5 0 42.6l-25.8 14.9c-3 1.7-4.3 5.2-3.3 8.5 6.7 21.6 18.2 41.1 33.2 57.4 2.3 2.5 6 3.1 9 1.4l25.8-14.9c10.9 9.3 23.4 16.5 36.9 21.3v29.8c0 3.4 2.4 6.4 5.7 7.1 22.3 5 45 4.8 66.2 0 3.3-.7 5.7-3.7 5.7-7.1v-29.8c13.5-4.8 26-12 36.9-21.3l25.8 14.9c2.9 1.7 6.7 1.1 9-1.4 15-16.2 26.5-35.8 33.2-57.4 1-3.3-.4-6.8-3.3-8.5l-25.8-14.9zM496 368.5c-26.8 0-48.5-21.8-48.5-48.5s21.8-48.5 48.5-48.5 48.5 21.8 48.5 48.5-21.7 48.5-48.5 48.5zM96 224c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm224 32c1.9 0 3.7-.5 5.6-.6 8.3-21.7 20.5-42.1 36.3-59.2 7.4-8 17.9-12.6 28.9-12.6 6.9 0 13.7 1.8 19.6 5.3l7.9 4.6c.8-.5 1.6-.9 2.4-1.4 7-14.6 11.2-30.8 11.2-48 0-61.9-50.1-112-112-112S208 82.1 208 144c0 61.9 50.1 112 112 112zm105.2 194.5c-2.3-1.2-4.6-2.6-6.8-3.9-8.2 4.8-15.3 9.8-27.5 9.8-10.9 0-21.4-4.6-28.9-12.6-18.3-19.8-32.3-43.9-40.2-69.6-10.7-34.5 24.9-49.7 25.8-50.3-.1-2.6-.1-5.2 0-7.8l-7.9-4.6c-3.8-2.2-7-5-9.8-8.1-3.3.2-6.5.6-9.8.6-24.6 0-47.6-6-68.5-16h-8.3C179.6 288 128 339.6 128 403.2V432c0 26.5 21.5 48 48 48h255.4c-3.7-6-6.2-12.8-6.2-20.3v-9.2zM173.1 274.6C161.5 263.1 145.6 256 128 256H64c-35.3 0-64 28.7-64 64v32c0 17.7 14.3 32 32 32h65.9c6.3-47.4 34.9-87.3 75.2-109.4z" /></svg>
+        <span>{$_('users')}</span>
+      </a>
+      <a
+        class:dark:bg-gray-900={$router.path === '/runners/'}
+        class:bg-gray-100={$router.path === '/runners/'}
+        class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
+        href="/runners/">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
+          fill="currentColor"
+          width="24"
+          height="24"><path fill="none" d="M0 0h24v24H0z" />
+          <path
+            d="M9.83 8.79L8 9.456V13H6V8.05h.015l5.268-1.918c.244-.093.51-.14.782-.131a2.616 2.616 0 0 1 2.427 1.82c.186.583.356.977.51 1.182A4.992 4.992 0 0 0 19 11v2a6.986 6.986 0 0 1-5.402-2.547l-.581 3.297L15 15.67V23h-2v-5.986l-2.05-1.987-.947 4.298-6.894-1.215.348-1.97 4.924.868L9.83 8.79zM13.5 5.5a2 2 0 1 1 0-4 2 2 0 0 1 0 4z" /></svg>
+        <span>{$_('runners')}</span>
+      </a>
+      <a
+        class:dark:bg-gray-900={$router.path === '/teams/'}
+        class:bg-gray-100={$router.path === '/teams/'}
+        class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
+        href="/teams/">
+        <svg
+          class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
+          fill="currentColor"
+          width="24"
+          height="24"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 640 512"><path
+            fill="currentColor"
+            d="M96 224c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm448 0c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm32 32h-64c-17.6 0-33.5 7.1-45.1 18.6 40.3 22.1 68.9 62 75.1 109.4h66c17.7 0 32-14.3 32-32v-32c0-35.3-28.7-64-64-64zm-256 0c61.9 0 112-50.1 112-112S381.9 32 320 32 208 82.1 208 144s50.1 112 112 112zm76.8 32h-8.3c-20.8 10-43.9 16-68.5 16s-47.6-6-68.5-16h-8.3C179.6 288 128 339.6 128 403.2V432c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48v-28.8c0-63.6-51.6-115.2-115.2-115.2zm-223.7-13.4C161.5 263.1 145.6 256 128 256H64c-35.3 0-64 28.7-64 64v32c0 17.7 14.3 32 32 32h65.9c6.3-47.4 34.9-87.3 75.2-109.4z" /></svg>
+        <span>{$_('teams')}</span>
+      </a>
+      <a
+        class:dark:bg-gray-900={$router.path === '/tracks/'}
+        class:bg-gray-100={$router.path === '/tracks/'}
+        class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
+        href="/tracks/">
+        <svg
+          class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
+          fill="currentColor"
+          width="24"
+          height="24"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 640 512"><path
+            fill="currentColor"
+            d="M635.7 167.2L556.1 31.7c-8.8-15-28.3-20.1-43.5-11.5l-69 39.1L503.3 161c2.2 3.8.9 8.5-2.9 10.7l-13.8 7.8c-3.8 2.2-8.7.9-10.9-2.9L416 75l-55.2 31.3 27.9 47.4c2.2 3.8.9 8.5-2.9 10.7l-13.8 7.8c-3.8 2.2-8.7.9-10.9-2.9L333.2 122 278 153.3 337.8 255c2.2 3.7.9 8.5-2.9 10.7l-13.8 7.8c-3.8 2.2-8.7.9-10.9-2.9l-59.7-101.7-55.2 31.3 27.9 47.4c2.2 3.8.9 8.5-2.9 10.7l-13.8 7.8c-3.8 2.2-8.7.9-10.9-2.9l-27.9-47.5-55.2 31.3 59.7 101.7c2.2 3.7.9 8.5-2.9 10.7l-13.8 7.8c-3.8 2.2-8.7.9-10.9-2.9L84.9 262.9l-69 39.1C.7 310.7-4.6 329.8 4.2 344.8l79.6 135.6c8.8 15 28.3 20.1 43.5 11.5L624.1 210c15.2-8.6 20.4-27.8 11.6-42.8z" /></svg>
+        <span>{$_('tracks')}</span>
+      </a>
+      <a
+        class:dark:bg-gray-900={activePage === 'blub'}
+        class:bg-gray-100={activePage === 'blub'}
+        class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
+        href="#">
+        <svg
+          class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 20 20"
+          fill="currentColor">
+          <path d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9z" />
+          <path
+            fill-rule="evenodd"
+            d="M4 5a2 2 0 012-2 3 3 0 003 3h2a3 3 0 003-3 2 2 0 012 2v11a2 2 0 01-2 2H6a2 2 0 01-2-2V5zm9.707 5.707a1 1 0 00-1.414-1.414L9 12.586l-1.293-1.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
+            clip-rule="evenodd" />
+        </svg>
+        <span>Checklists</span>
+      </a>
+      <div>
+        <div
+          tabindex="0"
+          class:dark:bg-gray-900={activePage === 'blub'}
+          class:bg-gray-100={activePage === 'blub'}
+          class="flex items-center justify-between px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
+          role="button"
+          on:click={() => {
+            dropdown1 = !dropdown1;
+          }}>
+          <div class="flex items-center">
            <svg
-              class="block h-6 w-6"
+              class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
              xmlns="http://www.w3.org/2000/svg"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-              aria-hidden="true">
+              viewBox="0 0 20 20"
+              fill="currentColor">
              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                d="M4 6h16M4 12h16M4 18h16" />
+                fill-rule="evenodd"
+                d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z"
+                clip-rule="evenodd" />
            </svg>
-            <!--
-              Heroicon name: x
-
-              Menu open: "block", Menu closed: "hidden"
-            -->
-            <svg
-              class="hidden h-6 w-6"
-              xmlns="http://www.w3.org/2000/svg"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-              aria-hidden="true">
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                d="M6 18L18 6M6 6l12 12" />
-            </svg>
-          </button>
-        </div>
-      </div>
-    </div>
-
-    <!--
-      Mobile menu, toggle classes based on menu state.
-
-      Open: "block", closed: "hidden"
-    -->
-    <div class="hidden md:hidden">
-      <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
-        <!-- Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" -->
-        <a
-          href="#"
-          class="bg-gray-900 text-white block px-3 py-2 rounded-md text-base font-medium">Dashboard</a>
-
-        <a
-          href="#"
-          class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Team</a>
-
-        <a
-          href="#"
-          class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Projects</a>
-
-        <a
-          href="#"
-          class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Calendar</a>
-
-        <a
-          href="#"
-          class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Reports</a>
-      </div>
-      <div class="pt-4 pb-3 border-t border-gray-700">
-        <div class="flex items-center px-5">
-          <div class="flex-shrink-0">
-            <img
-              class="h-10 w-10 rounded-full"
-              src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
-              alt="" />
+            <span>Integrations</span>
          </div>
-          <div class="ml-3">
-            <div class="text-base font-medium leading-none text-white">
-              Tom Cook
-            </div>
-            <div class="text-sm font-medium leading-none text-gray-400">
-              tom@example.com
-            </div>
-          </div>
-          <button
-            class="ml-auto bg-gray-800 flex-shrink-0 p-1 rounded-full text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white">
-            <span class="sr-only">View notifications</span>
-            <!-- Heroicon name: bell -->
+          {#if dropdown1}
            <svg
-              class="h-6 w-6"
+              class="flex-shrink-0 w-4 h-4 ml-2 transition transform"
              xmlns="http://www.w3.org/2000/svg"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-              aria-hidden="true">
+              style="transform:rotate(90deg)"
+              viewBox="0 0 20 20"
+              fill="currentColor">
              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
+                fill-rule="evenodd"
+                d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
+                clip-rule="evenodd" />
            </svg>
-          </button>
-        </div>
-        <div class="mt-3 px-2 space-y-1">
-          <a
-            href="#"
-            class="block px-3 py-2 rounded-md text-base font-medium text-gray-400 hover:text-white hover:bg-gray-700">Your
-            Profile</a>
-
-          <a
-            href="#"
-            class="block px-3 py-2 rounded-md text-base font-medium text-gray-400 hover:text-white hover:bg-gray-700">Settings</a>
-
-          <a
-            href="#"
-            class="block px-3 py-2 rounded-md text-base font-medium text-gray-400 hover:text-white hover:bg-gray-700">Sign
-            out</a>
+          {:else}
+            <svg
+              class="flex-shrink-0 w-4 h-4 ml-2 transition transform"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 20 20"
+              fill="currentColor">
+              <path
+                fill-rule="evenodd"
+                d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
+                clip-rule="evenodd" />
+            </svg>
+          {/if}
        </div>
+        {#if dropdown1}
+          <div class="mb-4">
+            <a
+              class="flex items-center py-2 pl-12 pr-4 transition cursor-pointer hover:bg-gray-100 hover:text-gray-900"
+              href="#">Shopify</a>
+            <a
+              class="flex items-center py-2 pl-12 pr-4 transition cursor-pointer hover:bg-gray-100 hover:text-gray-900"
+              href="#">Slack</a>
+            <a
+              class="flex items-center py-2 pl-12 pr-4 transition cursor-pointer hover:bg-gray-100 hover:text-gray-900"
+              href="#">Zapier</a>
+          </div>
+        {/if}
      </div>
-    </div>
+      <a
+        class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
+        href="#">
+        <svg
+          class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 20 20"
+          fill="currentColor">
+          <path
+            fill-rule="evenodd"
+            d="M5 5a3 3 0 015-2.236A3 3 0 0114.83 6H16a2 2 0 110 4h-5V9a1 1 0 10-2 0v1H4a2 2 0 110-4h1.17C5.06 5.687 5 5.35 5 5zm4 1V5a1 1 0 10-1 1h1zm3 0a1 1 0 10-1-1v1h1z"
+            clip-rule="evenodd" />
+          <path d="M9 11H3v5a2 2 0 002 2h4v-7zM11 18h4a2 2 0 002-2v-5h-6v7z" />
+        </svg>
+        <span>{$_('changelog')}</span>
+      </a>
+      <a
+        class:dark:bg-gray-900={$router.path === '/settings/'}
+        class:bg-gray-100={$router.path === '/settings/'}
+        class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
+        href="/settings/">
+        <svg
+          class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 20 20"
+          fill="currentColor">
+          <path
+            fill-rule="evenodd"
+            d="M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z"
+            clip-rule="evenodd" />
+        </svg>
+        <span>{$_('settings')}</span>
+      </a>
+      <a
+        class:dark:bg-gray-900={$router.path === '/about/'}
+        class:bg-gray-100={$router.path === '/about/'}
+        class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
+        href="/about/">
+        <svg
+          class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" />
+          <path d="M12 16v-4M12 8h.01" /></svg>
+        <span>{$_('about')}</span>
+      </a>
+      <span
+        tabindex="0"
+        class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
+        on:click={() => {
+          AuthService.authControllerLogout();
+          logout();
+        }}>
+        <svg
+          class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
+          fill="currentColor"
+          width="24"
+          height="24"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z" />
+          <path
+            d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2a9.985 9.985 0 0 1 8 4h-2.71a8 8 0 1 0 .001 12h2.71A9.985 9.985 0 0 1 12 22zm7-6v-3h-8v-2h8V8l5 4-5 4z" /></svg>
+        <span>{$_('logout')}</span>
+      </span>
+    </nav>
  </nav>
-
-  <header class="bg-white shadow">
-    <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
-      <h1 class="text-3xl leading-tight">
-        <span class="font-bold">Dashboard</span><span> - hello there 👋</span>
-      </h1>
-    </div>
-  </header>
-  <main>
-    <div class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
-      <BreadcrumbNav/>
-      <!--  -->
-      <StatCards />
-      <!--  -->
-
-      <div class="mb-8">
-        <Tracks />
+  <div class="ml-0 transition md:ml-60">
+    <header
+      class="flex items-center justify-between w-full px-4 border-b h-14">
+      <button
+        on:click={() => {
+          navOpen = !navOpen;
+        }}
+        class="block btn btn-light md:hidden">
+        <span class="sr-only">Menu</span>
+        <svg
+          class="w-4 h-4"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 20 20"
+          fill="currentColor">
+          <path
+            fill-rule="evenodd"
+            d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
+            clip-rule="evenodd" />
+        </svg>
+      </button>
+      <!-- <div class="hidden -ml-3 form-icon md:block w-96">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor">
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+        </svg>
+        <input
+          class="border-0 form-input"
+          placeholder="Search for articles..." />
+      </div> -->
+      <div class="flex items-end">
+        <a href="#" class="flex text-gray-500">
+          <svg
+            class="flex-shrink-0 w-5 h-5"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 20 20"
+            fill="currentColor">
+            <path
+              d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z" />
+          </svg>
+        </a>
+        <a href="/profile/" class="ml-4">
+          <img
+            class="h-8 w-8 rounded-full"
+            src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+            alt="Profile Picture" />
+        </a>
      </div>
-      <Pagination />
-      <div class="mb-8">
-        <Table />
-      </div>
-      <div class="mb-8">
-        <FormLayout />
-      </div>
-    </div>
-  </main>
-</div>
+    </header>
+    <slot>
+      <NoComponentLoaded />
+    </slot>
+  </div>
+  <!-- Sidebar Backdrop -->
+  <div
+    on:click={() => {
+      navOpen = false;
+    }}
+    class:hidden={!navOpen}
+    class="fixed inset-0 z-10 w-screen h-screen bg-black bg-opacity-25 md:hidden" />
+</section>
--- a/src/components/DataTable.svelte
+++ b/src/components/DataTable.svelte
@@ -0,0 +1,31 @@
+<script>
+  import { _, json } from "svelte-i18n";
+  import { getlang } from "./datatable_i18n";
+  import { Grid } from "gridjs";
+  import "gridjs/dist/theme/mermaid.css";
+  //
+  let table;
+  const datatable = new Grid({
+    columns: ["Name", "Email", "Phone Number"],
+    language: getlang($json("datatable")),
+    sort: true,
+    search: { enabled: true },
+    data: [
+      ["John", "john@example.com", "(353) 01 222 3333"],
+      ["Mark", "mark@gmail.com", "(01) 22 888 4444"],
+      ["Eoin", "eoin@gmail.com", "0097 22 654 00033"],
+      ["Sarah", "sarahcdd@gmail.com", "+322 876 1233"],
+      ["Afshin", "afshin@mail.com", "(353) 22 87 8356"],
+    ],
+    pagination: {
+      enabled: true,
+      limit: 2,
+      summary: false,
+    },
+  });
+  setTimeout(() => {
+    datatable.render(table);
+  }, 0);
+</script>
+
+<div bind:this={table} />
--- a/src/components/FileUpload.svelte
+++ b/src/components/FileUpload.svelte
@@ -0,0 +1,74 @@
+<script>
+  import "filepond/dist/filepond.css";
+  import FilePond from "svelte-filepond";
+  import { _ } from "svelte-i18n";
+  let pond;
+  // pond.getFiles() will return the active files
+  // the name to use for the internal file input
+  let name = "filepond";
+  function handleInit() {
+    // console.log("FilePond has initialised");
+  }
+  function handleAddFile(err, fileItem) {
+    // console.log("A file has been added", fileItem);
+  }
+  const labelInvalidField = $_("filepond__field-contains-invalid-files");
+  const labelFileWaitingForSize = $_("filepond__waiting-for-size");
+  const labelFileSizeNotAvailable = $_("filepond__size-not-available");
+  const labelFileLoading = $_("filepond__loading");
+  const labelFileLoadError = $_("filepond__error-during-load");
+  const labelFileProcessing = $_("filepond__uploading");
+  const labelFileProcessingComplete = $_("filepond__upload-complete");
+  const labelFileProcessingAborted = $_("filepond__upload-cancelled");
+  const labelFileProcessingError = $_("filepond__error-during-upload");
+  const labelFileProcessingRevertError = $_("filepond__error-during-revert");
+  const labelFileRemoveError = $_("filepond__error-during-remove");
+  const labelTapToCancel = $_("filepond__tap-to-cancel");
+  const labelTapToRetry = $_("filepond__tap-to-retry");
+  const labelTapToUndo = $_("filepond__tap-to-undo");
+  const labelButtonRemoveItem = $_("filepond__remove");
+  const labelButtonAbortItemLoad = $_("filepond__abort");
+  const labelButtonRetryItemLoad = $_("filepond__retry");
+  const labelButtonAbortItemProcessing = $_("filepond__cancel");
+  const labelButtonUndoItemProcessing = $_("filepond__undo");
+  const labelButtonRetryItemProcessing = $_("filepond__retry");
+  const labelButtonProcessItem = $_("filepond__upload");
+  const labelIdle =
+    $_("drag-and-drop-your-files-or") +
+    ` <span class="filepond--label-action"> ` +
+    $_("browse") +
+    ` </span>`;
+</script>
+
+<div class="app">
+  <FilePond
+    bind:this={pond}
+    {name}
+    {labelFileWaitingForSize}
+    {labelFileSizeNotAvailable}
+    {labelFileLoading}
+    {labelFileLoadError}
+    {labelFileProcessing}
+    {labelFileProcessingComplete}
+    {labelFileProcessingAborted}
+    {labelFileProcessingError}
+    {labelFileProcessingRevertError}
+    {labelFileRemoveError}
+    {labelTapToCancel}
+    {labelTapToRetry}
+    {labelTapToUndo}
+    {labelButtonRemoveItem}
+    {labelButtonAbortItemLoad}
+    {labelButtonRetryItemLoad}
+    {labelButtonAbortItemProcessing}
+    {labelButtonUndoItemProcessing}
+    {labelButtonRetryItemProcessing}
+    {labelButtonProcessItem}
+    {labelIdle}
+    {labelInvalidField}
+    server="/api"
+    allowMultiple={false}
+    credits={false}
+    oninit={handleInit}
+    onaddfile={handleAddFile} />
+</div>
--- a/src/components/Footer.svelte
+++ b/src/components/Footer.svelte
@@ -0,0 +1,35 @@
+<script>
+  import { _ } from "svelte-i18n";
+  $: releaseinfo = "";
+  setTimeout(() => {
+    releaseinfo = document
+      .getElementById("buildinfo")
+      .textContent.replace("RELEASE_INFO-", "")
+      .replace("-RELEASE_INFO", "");
+  }, 1500);
+  const year = new Date().getFullYear();
+</script>
+
+<footer class="p-5 w-full">
+  <p class="text-sm text-gray-500 mt-4">
+    Lauf für Kaya! Läufersystem - Copyright ©
+    {year}
+    + proudly powered by
+    <a
+      class="underline"
+      href="https://odit.services"
+      rel="noopener,noreferrer"
+      target="_blank">ODIT.Services</a>
+  </p>
+  <p class="text-sm text-gray-500 mt-4">
+    <a
+      class="underline"
+      target="_blank"
+      rel="noopener, noreferrer"
+      href="https://git.odit.services/lfk/frontend/">LfK!Frontend</a>@<a
+      class="underline"
+      target="_blank"
+      rel="noopener, noreferrer"
+      href="https://git.odit.services/lfk/frontend/src/tag/{releaseinfo}">{releaseinfo}</a>
+  </p>
+</footer>
--- a/src/components/ForgotPassword.svelte
+++ b/src/components/ForgotPassword.svelte
@@ -0,0 +1,133 @@
+<script>
+  import { ApiError, AuthService } from "@odit/lfk-client-js";
+  import { _ } from "svelte-i18n";
+  import Toastify from "toastify-js";
+  import "toastify-js/src/toastify.css";
+  import isEmail from "validator/es/lib/isEmail";
+
+  let reset_mail_sent = false;
+  let usersEmail = "";
+  function reset() {
+    if (isEmail(usersEmail)) {
+      AuthService.authControllerGetResetToken({ email: usersEmail })
+        .then((resp) => {
+          console.log(resp);
+          console.log(resp.resetToken);
+          Toastify({
+            text: $_("mail-validation-in-progress"),
+            duration: 3500,
+          }).showToast();
+          reset_mail_sent = true;
+        })
+        .catch((err) => {
+          console.log(err.body.name);
+          console.log(err.body.message);
+        });
+    } else {
+      Toastify({
+        text: $_("invalid-mail-reset"),
+        duration: 3500,
+      }).showToast();
+    }
+  }
+</script>
+
+{#if reset_mail_sent}
+  <div class="min-h-screen flex items-center justify-center bg-gray-100">
+    <div class="max-w-md w-full py-12 px-6">
+      <img style="height:10rem;" class="mx-auto" src="/lfk-logo.png" alt="" />
+      <p class="mt-6 text-lg text-center font-bold text-gray-900">
+        {$_('application_name')}
+      </p>
+      <p class="mt-2 mb-2 text-sm text-center text-gray-900">
+        Passwort-Reset Mail wurde an
+        {usersEmail}
+        geschickt
+      </p>
+      <div class="mt-6">
+        <div class="mt-6">
+          <a
+            href="/"
+            class="block w-full text-center py-2 px-3 border border-gray-300 rounded-md text-gray-900 font-medium hover:border-gray-400 focus:outline-none focus:border-gray-400 sm:text-sm">
+            {$_('goback')}
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+{:else}
+  <div class="min-h-screen flex items-center justify-center bg-gray-100">
+    <div class="max-w-md w-full py-12 px-6">
+      <img style="height:10rem;" class="mx-auto" src="/lfk-logo.png" alt="" />
+      <p class="mt-6 text-lg text-center font-bold text-gray-900">
+        {$_('application_name')}
+      </p>
+      <p class="mt-6 text-sm text-center text-gray-900">
+        {$_('forgot_password?')}
+      </p>
+      <p class="mt-2 mb-2 text-sm text-center text-gray-900">
+        {$_('dont-panic-were-resetting-it')}
+      </p>
+      <div>
+        <div class="rounded-md shadow-sm">
+          <div>
+            <input
+              aria-label={$_('e-mail-adress')}
+              name="email"
+              type="email"
+              required=""
+              class="border-gray-300 placeholder-gray-500 appearance-none rounded-none relative block w-full px-3 py-2 border text-gray-900 rounded-t-md focus:outline-none focus:shadow-outline-blue focus:border-blue-300 focus:z-10 sm:text-sm"
+              placeholder={$_('e-mail-adress')}
+              bind:value={usersEmail} />
+          </div>
+        </div>
+
+        <div class="mt-5">
+          <button
+            on:click={reset}
+            type="submit"
+            class="relative block w-full py-2 px-3 border border-transparent rounded-md text-white font-semibold bg-gray-800 hover:bg-gray-700 focus:bg-gray-900 focus:outline-none focus:shadow-outline sm:text-sm">
+            <span class="absolute left-0 inset-y pl-3">
+              <svg
+                class="h-5 w-5 text-gray-500"
+                fill="currentColor"
+                viewBox="0 0 20 20">
+                <path
+                  fill-rule="evenodd"
+                  d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z"
+                  clip-rule="evenodd" />
+              </svg>
+            </span>
+            {$_('reset-my-password')}
+          </button>
+        </div>
+        <div class="mt-6">
+          <div class="relative">
+            <div class="absolute inset-0 flex items-center">
+              <div class="w-full border-t border-gray-300" />
+            </div>
+            <div class="relative flex justify-center text-sm">
+              <span
+                class="px-2 bg-gray-100 text-gray-500">{$_('dont-have-your-email-connected')}</span>
+            </div>
+          </div>
+          <span
+            class="mt-2 text-sm px-2 bg-gray-100 text-gray-500 justify-center relative flex">{$_('cannot-reset-your-password-directly')}</span>
+
+          <div class="mt-6">
+            <a
+              href="mailto:lfk@odit.services"
+              class="block w-full text-center py-2 px-3 border border-gray-300 rounded-md text-gray-900 font-medium hover:border-gray-400 focus:outline-none focus:border-gray-400 sm:text-sm">
+              {$_('send-a-mail-to-lfk-odit-services')}
+            </a>
+          </div>
+          <div class="mt-6">
+            <a
+              href="/"
+              class="block w-full text-center py-2 px-3 border border-gray-300 rounded-md text-gray-900 font-medium hover:border-gray-400 focus:outline-none focus:border-gray-400 sm:text-sm">{$_('goback')}</a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+{/if}
--- a/src/components/FormLayout.svelte
+++ b/src/components/FormLayout.svelte
@@ -55,6 +55,7 @@
            </div>

            <div>
+              <!-- svelte-ignore a11y-label-has-associated-control -->
              <label class="block text-sm font-medium text-gray-700">
                Photo
              </label>
@@ -71,6 +72,7 @@
            </div>

            <div>
+              <!-- svelte-ignore a11y-label-has-associated-control -->
              <label class="block text-sm font-medium text-gray-700">
                Cover photo
              </label>
--- a/src/components/Login.svelte
+++ b/src/components/Login.svelte
@@ -1,45 +1,61 @@
 <script>
-  import { _ } from "svelte-i18n";
  import store from "../store.js";
-  //
-  import { OpenAPI, AuthService, TrackService } from "@odit/lfk-client-js";
-  OpenAPI.BASE = "http://localhost:4010";
-  //
+  import localForage from "localforage";
+  import { _ } from "svelte-i18n";
  store.init();
-  //
+  import { OpenAPI, AuthService } from "@odit/lfk-client-js";
+  import Footer from "./Footer.svelte";
  import Toastify from "toastify-js";
-  import "toastify-js/src/toastify.css";
-  let usersUsername = "";
-  let usersPassword = "";
+  // ------
+  let username = "demo";
+  let password = "demo";
+  let is_blocked_by_autologin = false;
  let last_loginclick_processed = true;

+  localForage.getItem("logindata", (err, value) => {
+    if (value) {
+      if (value.access_token && value.refresh_token) {
+        is_blocked_by_autologin = true;
+        OpenAPI.TOKEN = value.access_token;
+        const jwtinfo = JSON.parse(atob(OpenAPI.TOKEN.split(".")[1]));
+        store.login(value, jwtinfo);
+        Toastify({
+          text: $_("welcome_wavinghand"),
+          duration: 500,
+          backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
+        }).showToast();
+      }
+    }
+  });
+
  const login = async () => {
    // prevent login button spamming
-    if (last_loginclick_processed) {
+    if (last_loginclick_processed && is_blocked_by_autologin === false) {
      last_loginclick_processed = false;
      Toastify({
        text: $_("login_is_checked"),
-        duration: 1500,
+        duration: 500,
      }).showToast();
-      console.log(usersUsername);
-      console.log(usersPassword);
      AuthService.authControllerLogin({
-        username: usersUsername,
-        password: usersPassword,
+        username,
+        password,
      })
-        .then((result) => {
+        .then(async (result) => {
+          await localForage.setItem("logindata", result);
          OpenAPI.TOKEN = result.access_token;
-          store.login(result.access_token);
+          const jwtinfo = JSON.parse(atob(OpenAPI.TOKEN.split(".")[1]));
+          store.login(result.access_token, jwtinfo);
+          location.replace("/");
          Toastify({
            text: $_("welcome_wavinghand"),
-            duration: 1500,
+            duration: 500,
            backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
          }).showToast();
        })
        .catch((err) => {
          Toastify({
            text: $_("error_on_login"),
-            duration: 1500,
+            duration: 500,
            backgroundColor:
              "linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
          }).showToast();
@@ -57,40 +73,41 @@
      }).showToast();
    }
  };
+  function handleKeydown(e) {
+    if (e.keyCode === 13) {
+      login();
+    }
+  }
 </script>

-<div class="min-h-screen flex items-center justify-center bg-gray-100">
-  <div class="max-w-md w-full py-12 px-6">
-    <img
-      class="mx-auto h-20 w-auto"
-      src="https://lauf-fuer-kaya.de/Bilder/kaya-logo-quadrat.png"
-      alt="" />
-    <p class="mt-6 text-lg text-center font-bold text-gray-900">
-      {$_('log_in_to_your_account')}
-    </p>
-    <p class="mt-6 text-sm text-center text-gray-900">
-      {$_('log_in_to_your_account')}
-    </p>
+<div
+  class="min-h-screen flex items-center justify-center bg-gray-100 text-gray-900">
+  <div class="max-w-md w-full py-12 px-6" role="main">
+    <img style="height:10rem;" class="mx-auto" src="/lfk-logo.png" alt="" />
+    <p class="mt-6 text-lg text-center font-bold">{$_('application_name')}</p>
+    <p class="mt-6 text-sm text-center">{$_('log_in_to_your_account')}</p>
    <div>
      <div class="rounded-md shadow-sm">
        <div>
+          <!-- svelte-ignore a11y-autofocus -->
          <input
-            aria-label={$_('email_address')}
-            name="email"
-            type="email"
+            autofocus
+            aria-label={$_('email_address_or_username')}
+            type="text"
            required=""
-            class="border-gray-300 placeholder-gray-500 appearance-none rounded-none relative block w-full px-3 py-2 border text-gray-900 rounded-t-md focus:outline-none focus:shadow-outline-blue focus:border-blue-300 focus:z-10 sm:text-sm"
-            placeholder={$_('email_address')}
-            bind:value={usersUsername} />
+            class="border-gray-300 placeholder-gray-500 appearance-none rounded-none relative block w-full px-3 py-2 border rounded-t-md focus:outline-none focus:shadow-outline-blue focus:border-blue-300 focus:z-10 sm:text-sm"
+            on:keydown={handleKeydown}
+            placeholder={$_('email_address_or_username')}
+            bind:value={username} />
        </div>
        <div class="-mt-px relative">
          <input
            aria-label={$_('password')}
-            name="password"
            type="password"
            required=""
-            bind:value={usersPassword}
-            class="border-gray-300 placeholder-gray-500 appearance-none rounded-none relative block w-full px-3 py-2 border text-gray-900 rounded-b-md focus:outline-none focus:shadow-outline-blue focus:border-blue-300 focus:z-10 sm:text-sm"
+            bind:value={password}
+            class="border-gray-300 placeholder-gray-500 appearance-none rounded-none relative block w-full px-3 py-2 border rounded-b-md focus:outline-none focus:shadow-outline-blue focus:border-blue-300 focus:z-10 sm:text-sm"
+            on:keydown={handleKeydown}
            placeholder={$_('password')} />
        </div>
      </div>
@@ -118,9 +135,10 @@
    <div class="mt-2">
      <a
        href="/forgot_password"
-        class="block w-full text-center py-2 px-3 border border-gray-300 rounded-md text-gray-900 font-medium hover:border-gray-400 focus:outline-none focus:border-gray-400 sm:text-sm">
+        class="block w-full text-center py-2 px-3 border border-gray-300 rounded-md font-medium hover:border-gray-400 focus:outline-none focus:border-gray-400 sm:text-sm">
        {$_('forgot_password?')}
      </a>
    </div>
  </div>
 </div>
+<Footer />
--- a/src/components/LoginAlt.svelte
+++ b/src/components/LoginAlt.svelte
@@ -12,7 +12,7 @@
    <div>
      <img
        class="mx-auto h-12 w-auto"
-        src="https://lauf-fuer-kaya.de/Bilder/kaya-logo-quadrat.png"
+        src="/lfk-logo.png"
        alt="" />
      <h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900">
        Sign in to your account
--- a/src/components/MainDashContent.svelte
+++ b/src/components/MainDashContent.svelte
@@ -0,0 +1,25 @@
+<script>
+  import { _ } from "svelte-i18n";
+  import StatCards from "./StatCards.svelte";
+  import store from "../store";
+  import ComponentDump from "./ComponentDump.svelte";
+  let navOpen = false;
+</script>
+
+<div
+  class="p-5 overflow-x-hidden"
+  on:click={() => {
+    navOpen = false;
+  }}>
+  <!-- <div class="border-4 border-dashed rounded h-96" /> -->
+  <h1 class="text-3xl leading-tight">
+    <span class="font-extrabold">{$_('dashboard-title')}</span> <span>
+      -
+      {$_('dashboard-greeting')},
+      <span
+        class="text-blue-500">{store.state.jwtinfo.userdetails.firstname}</span>
+      👋</span>
+  </h1>
+  <StatCards />
+  <ComponentDump />
+</div>
--- a/src/components/NoComponentLoaded.svelte
+++ b/src/components/NoComponentLoaded.svelte
@@ -0,0 +1,23 @@
+<script>
+  import { _ } from "svelte-i18n";
+</script>
+
+<body class="antialiased font-sans">
+  <div class="flex min-h-screen">
+    <div class="w-full bg-white flex items-center justify-center ">
+      <div class="max-w-sm m-8">
+        <div class="text-black text-5xl md:text-15xl font-black">
+          Internal Error
+        </div>
+        <div class="w-16 h-1 bg-purple-light my-3 md:my-6" />
+        <p
+          class="text-grey-darker text-2xl md:text-3xl font-light mb-8 leading-normal">
+          Something went wrong in the UI logic
+        </p>
+        <a
+          href="/"
+          class="bg-transparent text-grey-darkest font-bold uppercase tracking-wide py-3 px-6 border-2 border-grey-light hover:border-grey rounded-lg">{$_('goback')}</a>
+      </div>
+    </div>
+  </div>
+</body>
--- a/src/components/NotFound.svelte
+++ b/src/components/NotFound.svelte
@@ -1,23 +1,23 @@
+<script>
+  import { _ } from "svelte-i18n";
+</script>
+
 <body class="antialiased font-sans">
-  <div class="md:flex min-h-screen">
-    <div class="w-full md:w-1/2 bg-white flex items-center justify-center ">
+  <div class="flex min-h-screen">
+    <div class="w-full bg-white flex items-center justify-center ">
      <div class="max-w-sm m-8">
-        <div class="text-black text-5xl md:text-15xl font-black">404</div>
+        <div class="text-black text-5xl md:text-15xl font-black">
+          {$_('404title')}
+        </div>
        <div class="w-16 h-1 bg-purple-light my-3 md:my-6" />
        <p
          class="text-grey-darker text-2xl md:text-3xl font-light mb-8 leading-normal">
-          Sorry, the page you are looking for could not be found.
+          {$_('404message')}
        </p>
-        <button
-          class="bg-transparent text-grey-darkest font-bold uppercase tracking-wide py-3 px-6 border-2 border-grey-light hover:border-grey rounded-lg">Go
-          Home</button>
+        <a
+          href="/"
+          class="bg-transparent text-grey-darkest font-bold uppercase tracking-wide py-3 px-6 border-2 border-grey-light hover:border-grey rounded-lg">{$_('goback')}</a>
      </div>
    </div>
-    <div
-      class="relative pb-full md:flex md:pb-0 md:min-h-screen w-full md:w-1/2">
-      <div
-        style="background-image: url('src/svg/404-illustration.svg');"
-        class="absolute pin bg-cover bg-no-repeat md:bg-left lg:bg-center" />
-    </div>
  </div>
 </body>
--- a/src/components/OrgDetail.svelte
+++ b/src/components/OrgDetail.svelte
@@ -0,0 +1,83 @@
+<script>
+  export let params;
+</script>
+
+<section class="container p-5">
+  <span class="mb-1 text-3xl font-extrabold leading-tight">
+    Orgs
+  </span>
+  <p class="mb-8 text-lg text-gray-500">
+    configure the tracks & minimum lap times
+  </p>
+  <div class="flex flex-row mb-4">
+    <div class="w-full">
+      <nav class="w-full flex">
+        <ol class="list-none flex flex-row items-center justify-start">
+          <li class="mr-2 flex items-center">
+            <svg
+              stroke="currentColor"
+              fill="none"
+              stroke-width="2"
+              viewBox="0 0 24 24"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              class="h-3 w-3 stroke-current"
+              height="1em"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"><path
+                d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
+              <polyline points="9 22 9 12 15 12 15 22" /></svg>
+          </li>
+          <li class="flex items-center">
+            <a class="mr-2" href="/">Home</a><svg
+              stroke="currentColor"
+              fill="none"
+              stroke-width="2"
+              viewBox="0 0 24 24"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              class="h-3 w-3 mr-2 stroke-current"
+              height="1em"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"><line
+                x1="5"
+                y1="12"
+                x2="19"
+                y2="12" />
+              <polyline points="12 5 19 12 12 19" /></svg>
+          </li>
+          <li class="mr-2 flex items-center">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              width="24"
+              height="24"><path fill="none" d="M0 0h24v24H0z" />
+              <path
+                d="M21 20h2v2H1v-2h2V3a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v17zm-2 0V4H5v16h14zM8 11h3v2H8v-2zm0-4h3v2H8V7zm0 8h3v2H8v-2zm5 0h3v2h-3v-2zm0-4h3v2h-3v-2zm0-4h3v2h-3V7z" /></svg>
+          </li>
+          <li class="flex items-center">
+            <a class="mr-2" href="./">Orgs</a><svg
+              stroke="currentColor"
+              fill="none"
+              stroke-width="2"
+              viewBox="0 0 24 24"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              class="h-3 w-3 mr-2 stroke-current"
+              height="1em"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"><line
+                x1="5"
+                y1="12"
+                x2="19"
+                y2="12" />
+              <polyline points="12 5 19 12 12 19" /></svg>
+          </li>
+          <li class="flex items-center">
+            <span class="mr-2">Org-Details #{params.orgid}</span>
+          </li>
+        </ol>
+      </nav>
+    </div>
+  </div>
+</section>
--- a/src/components/Orgs.svelte
+++ b/src/components/Orgs.svelte
@@ -0,0 +1,13 @@
+<script>
+  import { _ } from "svelte-i18n";
+</script>
+
+<section class="container p-5">
+  <span class="mb-1 text-3xl font-extrabold leading-tight">
+    Orgs
+  </span>
+  <p class="mb-8 text-lg text-gray-500">
+    add, delete, edit organizations
+  </p>
+  <nav><a class="underline" href="./1">Org 1</a></nav>
+</section>
--- a/src/components/Profile.svelte
+++ b/src/components/Profile.svelte
@@ -0,0 +1,242 @@
+<div class="min-h-screen w-full p-4">
+  <div class="section-title w-full mb-6 pt-3">
+    <div class="flex flex-row items-center justify-between mb-4">
+      <div class="flex flex-col">
+        <div class="text-xs uppercase font-light text-grey-500">Pages</div>
+        <div class="text-xl font-bold">User profile</div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="w-full p-4 mb-4 rounded-lg bg-white border border-grey-100 dark:bg-grey-895 dark:border-grey-890">
+    <div class="flex flex-row items-center justify-start p-4">
+      <div class="flex-shrink-0 w-24">
+        <img
+          src="/images/faces/m1.png"
+          alt="media"
+          class="shadow rounded-full h-20 w-20 shadow-outline mb-2" />
+      </div>
+      <div class="py-2 px-2">
+        <p class="text-base font-bold whitespace-no-wrap">Lucas Smith</p>
+        <p class="text-sm text-grey-500 whitespace-no-wrap">
+          Vital Database Dude
+        </p>
+        <div
+          class="flex flex-row items-center justify-start w-full py-1 space-x-2">
+          <svg
+            stroke="currentColor"
+            fill="none"
+            stroke-width="2"
+            viewBox="0 0 24 24"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            class="stroke-current text-xl text-twitter"
+            height="1em"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"><path
+              d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z" /></svg><svg
+            stroke="currentColor"
+            fill="none"
+            stroke-width="2"
+            viewBox="0 0 24 24"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            class="stroke-current text-xl text-facebook"
+            height="1em"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"><path
+              d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z" /></svg><svg
+            stroke="currentColor"
+            fill="none"
+            stroke-width="2"
+            viewBox="0 0 24 24"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            class="stroke-current text-xl text-instagram"
+            height="1em"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"><rect
+              x="2"
+              y="2"
+              width="20"
+              height="20"
+              rx="5"
+              ry="5" />
+            <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" />
+            <line x1="17.5" y1="6.5" x2="17.5" y2="6.5" /></svg>
+        </div>
+      </div>
+      <div class="ml-auto flex-shrink-0 space-x-2 hidden lg:flex">
+        <button
+          class="btn btn-default btn-rounded bg-blue-500 hover:bg-blue-600 text-white">Subscribe</button><button
+          class="btn btn-default btn-rounded bg-blue-500 hover:bg-blue-600 text-white">Follow</button>
+      </div>
+    </div>
+    <div class="flex flex-wrap">
+      <div class="w-full p-4">
+        <div class="flex flex-wrap flex-col w-full tabs">
+          <div class="flex lg:flex-wrap flex-row lg:space-x-2">
+            <div class="flex-none">
+              <button class="tab tab-underline tab-active" type="button">Account
+                settings</button>
+            </div>
+            <div class="flex-none">
+              <button class="tab tab-underline" type="button">Email preferences</button>
+            </div>
+            <div class="flex-none">
+              <button class="tab tab-underline" type="button">Security settings</button>
+            </div>
+          </div>
+          <div class="tab-content block">
+            <div class="py-4 w-full lg:w-1/2">
+              <div class="flex flex-col">
+                <form class="form flex flex-wrap w-full">
+                  <div class="w-full">
+                    <div class="form-element">
+                      <div class="form-label">First name</div><input
+                        name="first-name"
+                        type="text"
+                        class="form-input "
+                        placeholder="Enter you first name" />
+                    </div>
+                    <div class="form-element">
+                      <div class="form-label">Last name</div><input
+                        name="last-name"
+                        type="text"
+                        class="form-input "
+                        placeholder="Enter you last name" />
+                    </div>
+                    <div class="form-element">
+                      <div class="form-label">Email address</div><input
+                        name="email"
+                        type="email"
+                        class="form-input "
+                        placeholder="Enter you email address" />
+                    </div>
+                    <div class="form-element">
+                      <div class="form-label">Company</div><input
+                        name="company"
+                        type="text"
+                        class="form-input "
+                        placeholder="Enter you company" />
+                    </div>
+                    <div class="form-element">
+                      <div class="form-label">Position</div><input
+                        name="position"
+                        type="text"
+                        class="form-input "
+                        placeholder="Enter you position" />
+                    </div>
+                    <div class="form-element">
+                      <div class="form-label">Language</div><select
+                        name="language"
+                        class="form-select "><option>Select language</option>
+                        <option value="english">English</option>
+                        <option value="spanish">Spanish</option>
+                        <option value="portuguese">Portuguese</option></select>
+                    </div>
+                  </div><input
+                    type="submit"
+                    class="btn btn-default bg-blue-500 hover:bg-blue-600 text-white btn-rounded" />
+                </form>
+              </div>
+            </div>
+          </div>
+          <div class="tab-content hidden">
+            <div class="py-4 w-full lg:w-1/2">
+              <div class="flex flex-col">
+                <form class="form flex flex-wrap w-full">
+                  <div class="w-full">
+                    <div class="form-element">
+                      <div class="form-label">Current email</div><input
+                        name="email"
+                        type="email"
+                        class="form-input "
+                        placeholder="Enter you current email address" />
+                    </div>
+                    <div class="form-element">
+                      <div class="form-label">New email</div><input
+                        name="email"
+                        type="email"
+                        class="form-input "
+                        placeholder="Enter you new email address" />
+                    </div>
+                    <div class="form-element">
+                      <div class="form-label">Daily updates</div>
+                      <div class="flex items-center justify-start space-x-2">
+                        <label
+                          class="flex items-center justify-start space-x-2"><input
+                            type="radio"
+                            name="daily-updates"
+                            class="form-radio h-4 w-4 "
+                            value="yes" /><span
+                            class="">Yes</span></label><label
+                          class="flex items-center justify-start space-x-2"><input
+                            type="radio"
+                            name="daily-updates"
+                            class="form-radio h-4 w-4 "
+                            value="no" /><span class="">No</span></label>
+                      </div>
+                    </div>
+                    <div class="form-element">
+                      <div class="form-label">Weekly updates</div>
+                      <div class="flex items-center justify-start space-x-2">
+                        <label
+                          class="flex items-center justify-start space-x-2"><input
+                            type="radio"
+                            name="weekle-updates"
+                            class="form-radio h-4 w-4 "
+                            value="yes" /><span
+                            class="">Yes</span></label><label
+                          class="flex items-center justify-start space-x-2"><input
+                            type="radio"
+                            name="weekle-updates"
+                            class="form-radio h-4 w-4 "
+                            value="no" /><span class="">No</span></label>
+                      </div>
+                    </div>
+                  </div><input
+                    type="submit"
+                    class="btn btn-default bg-blue-500 hover:bg-blue-600 text-white btn-rounded" />
+                </form>
+              </div>
+            </div>
+          </div>
+          <div class="tab-content hidden">
+            <div class="py-4 w-full lg:w-1/2">
+              <div class="flex flex-col">
+                <form class="form flex flex-wrap w-full">
+                  <div class="w-full">
+                    <div class="form-element">
+                      <div class="form-label">Current password</div><input
+                        name="current-password"
+                        type="password"
+                        class="form-input "
+                        placeholder="Enter your current password" />
+                    </div>
+                    <div class="form-element">
+                      <div class="form-label">New password</div><input
+                        name="new-password"
+                        type="password"
+                        class="form-input "
+                        placeholder="Enter your new password" />
+                    </div>
+                    <div class="form-element">
+                      <div class="form-label">Confirm new password</div><input
+                        name="confirm-new-password"
+                        type="password"
+                        class="form-input "
+                        placeholder="Enter your new password confirmation" />
+                    </div>
+                  </div><input
+                    type="submit"
+                    class="btn btn-default bg-blue-500 hover:bg-blue-600 text-white btn-rounded" />
+                </form>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
--- a/src/components/PromiseError.svelte
+++ b/src/components/PromiseError.svelte
@@ -0,0 +1,11 @@
+<script>
+  import { _ } from "svelte-i18n";
+  export let error;
+</script>
+
+<div class="text-white px-6 py-4 border-0 rounded relative mb-4 bg-red-500">
+  <span class="inline-block align-middle mr-8">
+    <b class="capitalize">{$_('general_promise_error')}</b>
+    {error}
+  </span>
+</div>
--- a/src/components/Runners.svelte
+++ b/src/components/Runners.svelte
@@ -0,0 +1,10 @@
+<script>
+  import { _ } from "svelte-i18n";
+</script>
+
+<section class="container p-5">
+  <span class="mb-1 text-3xl font-extrabold leading-tight">
+    {$_('runners')}
+  </span>
+  <p class="mb-8 text-lg text-gray-500">läuft bei ihnen</p>
+</section>
--- a/src/components/Settings.svelte
+++ b/src/components/Settings.svelte
@@ -0,0 +1,35 @@
+<script>
+  import { _ } from "svelte-i18n";
+import FormLayout from "./FormLayout.svelte";
+</script>
+
+<div class="pt-12 px-4 sm:px-6 lg:px-8 lg:pt-20 bg-gray-900 pb-12">
+  <div class="text-center mb-8">
+    <h1
+      class="mt-9 font-display text-4xl leading-none font-semibold text-white sm:text-5xl lg:text-6xl">
+      🔨<br />{$_('settings')}
+    </h1>
+    <p
+      class="mt-2 max-w-xl mx-auto text-xl lg:max-w-3xl lg:text-2xl text-gray-300">
+      <span class="text-lg">configure your profile however you want</span>
+    </p>
+  </div>
+</div>
+
+<div class="pt-0 pb-16 bg-gray-50 overflow-hidden lg:pt-12 lg:py-24">
+  <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
+    <!-- <h2 class="text-4xl font-display font-semibold text-gray-900 md:text-5xl">
+      General
+    </h2> -->
+    <div
+      class="max-w-3xl mx-auto text-xl leading-8 font-medium text-gray-900 mb-16">
+      <p class="text-center">
+        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Temporibus et
+        amet voluptate nulla accusantium vero blanditiis nobis facere veritatis.
+        Impedit deserunt saepe aliquid unde consequuntur officia consequatur
+        fugit iusto dolorem?
+      </p>
+    </div>
+    <FormLayout />
+  </div>
+</div>
--- a/src/components/Sidebar.svelte
+++ b/src/components/Sidebar.svelte
@@ -0,0 +1,82 @@
+<script>
+  let open = false;
+</script>
+
+<div class="md:flex flex-col md:flex-row h-screen w-full">
+  <div
+    class="flex flex-col w-full md:w-64 text-gray-700 bg-white dark-mode:text-gray-200 dark-mode:bg-gray-800 flex-shrink-0">
+    <div
+      class="flex-shrink-0 px-8 py-4 flex flex-row items-center justify-between">
+      <a
+        href="/#/test"
+        class="text-lg font-semibold tracking-widest text-gray-900 uppercase rounded-lg dark-mode:text-white focus:outline-none focus:shadow-outline">Sidebar</a>
+      <button
+        class="rounded-lg md:hidden focus:outline-none focus:shadow-outline">
+        <svg fill="currentColor" viewBox="0 0 20 20" class="w-6 h-6">
+          {#if open}
+            <path
+              fill-rule="evenodd"
+              d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+              clip-rule="evenodd" />
+          {/if}
+          {#if !open}
+            <path
+              fill-rule="evenodd"
+              d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM9 15a1 1 0 011-1h6a1 1 0 110 2h-6a1 1 0 01-1-1z"
+              clip-rule="evenodd" />
+          {/if}
+        </svg>
+      </button>
+    </div>
+    <nav
+      :class:block={open}
+      :class:hidden={!open}
+      class="flex-grow md:block px-4 pb-4 md:pb-0 md:overflow-y-auto">
+      <a
+        class="block px-4 py-2 mt-2 text-sm font-semibold text-gray-900 bg-gray-200 rounded-lg dark-mode:bg-gray-700 dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline"
+        href="#">Blog</a>
+      <a
+        class="block px-4 py-2 mt-2 text-sm font-semibold text-gray-900 bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline"
+        href="#">Portfolio</a>
+      <a
+        class="block px-4 py-2 mt-2 text-sm font-semibold text-gray-900 bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline"
+        href="#">About</a>
+      <a
+        class="block px-4 py-2 mt-2 text-sm font-semibold text-gray-900 bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline"
+        href="#">Contact</a>
+      <div class="relative">
+        <button
+          on:click={() => {
+            open = !open;
+          }}
+          class="flex flex-row items-center w-full px-4 py-2 mt-2 text-sm font-semibold text-left bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:focus:bg-gray-600 dark-mode:hover:bg-gray-600 md:block hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline">
+          <span>Dropdown</span>
+          <svg
+            fill="currentColor"
+            viewBox="0 0 20 20"
+            class="inline w-4 h-4 mt-1 ml-1 transition-transform duration-200 transform md:-mt-1"><path
+              fill-rule="evenodd"
+              d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+              clip-rule="evenodd" /></svg>
+        </button>
+        <div
+          class:block={open}
+          class:hidden={!open}
+          class="absolute right-0 w-full mt-2 origin-top-right rounded-md shadow-lg">
+          <div
+            class="px-2 py-2 bg-white rounded-md shadow dark-mode:bg-gray-800">
+            <a
+              class="block px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 md:mt-0 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline"
+              href="#">Link #1</a>
+            <a
+              class="block px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 md:mt-0 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline"
+              href="#">Link #2</a>
+            <a
+              class="block px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 md:mt-0 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline"
+              href="#">Link #3</a>
+          </div>
+        </div>
+      </div>
+    </nav>
+  </div>
+</div>
--- a/src/components/StatCards.svelte
+++ b/src/components/StatCards.svelte
@@ -1,104 +1,165 @@
-<div
-  class="flex flex-col lg:flex-row w-full lg:space-x-2 space-y-2 lg:space-y-0 mb-2 lg:mb-4">
-  <div class="w-full lg:w-1/4">
-    <div
-      class="widget w-full p-4 rounded-lg bg-white border border-grey-100 dark:bg-grey-895 dark:border-grey-890">
-      <div class="flex flex-row items-center justify-between">
-        <div class="flex flex-col">
-          <div class="text-xs uppercase font-light text-grey-500">Users</div>
-          <div class="text-xl font-bold">588</div>
-        </div><svg
-          stroke="currentColor"
-          fill="none"
-          stroke-width="2"
-          viewBox="0 0 24 24"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          size="24"
-          class="stroke-current text-grey-500"
-          height="24"
-          width="24"
-          xmlns="http://www.w3.org/2000/svg"><path
-            d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
-          <circle cx="9" cy="7" r="4" />
-          <path d="M23 21v-2a4 4 0 0 0-3-3.87" />
-          <path d="M16 3.13a4 4 0 0 1 0 7.75" /></svg>
-      </div>
-    </div>
+<script>
+  import { StatsService } from "@odit/lfk-client-js";
+  import { _ } from "svelte-i18n";
+  const stats_promise = StatsService.statsControllerGet();
+</script>
+
+<!--  -->
+<h1>{$_('general-stats')}</h1>
+{#await stats_promise}
+  <div
+    class="bg-teal-lightest border-t-4 border-teal rounded-b text-teal-darkest px-4 py-3 shadow-md my-2"
+    role="alert">
+    <p class="font-bold">{$_('stats-are-being-loaded')}</p>
+    <p class="text-sm">{$_('this-might-take-a-moment')}</p>
  </div>
-  <div class="w-full lg:w-1/4">
-    <div
-      class="widget w-full p-4 rounded-lg bg-white border border-grey-100 dark:bg-grey-895 dark:border-grey-890">
-      <div class="flex flex-row items-center justify-between">
-        <div class="flex flex-col">
-          <div class="text-xs uppercase font-light text-grey-500">Sessions</div>
-          <div class="text-xl font-bold">435</div>
-        </div><svg
-          stroke="currentColor"
-          fill="none"
-          stroke-width="2"
-          viewBox="0 0 24 24"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          size="24"
-          class="stroke-current text-grey-500"
-          height="24"
-          width="24"
-          xmlns="http://www.w3.org/2000/svg"><polyline
-            points="22 12 18 12 15 21 9 3 6 12 2 12" /></svg>
-      </div>
-    </div>
-  </div>
-  <div class="w-full lg:w-1/4">
-    <div
-      class="widget w-full p-4 rounded-lg bg-white border border-grey-100 dark:bg-grey-895 dark:border-grey-890">
-      <div class="flex flex-row items-center justify-between">
-        <div class="flex flex-col">
-          <div class="text-xs uppercase font-light text-grey-500">
-            Bounce rate
+{:then stats}
+  <div
+    class="flex flex-col lg:flex-row w-full lg:space-x-2 space-y-2 lg:space-y-0 mb-2 lg:mb-4">
+    <a href="/runners/" class="w-full lg:w-1/4">
+      <div
+        class="widget w-full p-4 rounded-lg bg-white border border-grey-100 dark:bg-grey-895 dark:border-grey-890 dark:bg-gray-900 dark:text-white">
+        <div class="flex flex-row items-center justify-between">
+          <div class="flex flex-col">
+            <div class="text-xs uppercase font-light text-grey-500">
+              {$_('runners')}
+            </div>
+            <div class="text-xl font-bold">{stats.total_runners}</div>
          </div>
-          <div class="text-xl font-bold">40.5%</div>
-        </div><svg
-          stroke="currentColor"
-          fill="none"
-          stroke-width="2"
-          viewBox="0 0 24 24"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          size="24"
-          class="stroke-current text-grey-500"
-          height="24"
-          width="24"
-          xmlns="http://www.w3.org/2000/svg"><path
-            d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
-          <polyline points="15 3 21 3 21 9" />
-          <line x1="10" y1="14" x2="21" y2="3" /></svg>
+          <svg
+            height="24"
+            width="24"
+            fill="currentColor"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none" />
+            <path
+              d="M13.49 5.48c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm-3.6 13.9l1-4.4 2.1 2v6h2v-7.5l-2.1-2 .6-3c1.3 1.5 3.3 2.5 5.5 2.5v-2c-1.9 0-3.5-1-4.3-2.4l-1-1.6c-.4-.6-1-1-1.7-1-.3 0-.5.1-.8.1l-5.2 2.2v4.7h2v-3.4l1.8-.7-1.6 8.1-4.9-1-.4 2 7 1.4z" /></svg>
+        </div>
+      </div>
+    </a>
+    <div class="w-full lg:w-1/4">
+      <div
+        class="widget w-full p-4 rounded-lg bg-white border border-grey-100 dark:bg-grey-895 dark:border-grey-890 dark:bg-gray-900 dark:text-white">
+        <div class="flex flex-row items-center justify-between">
+          <div class="flex flex-col">
+            <div class="text-xs uppercase font-light text-grey-500">
+              {$_('total-scans')}
+            </div>
+            <div class="text-xl font-bold">{stats.total_scans}</div>
+          </div><svg
+            stroke="currentColor"
+            fill="currentColor"
+            stroke-width="2"
+            viewBox="0 0 24 24"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            size="24"
+            class="stroke-current text-grey-500"
+            height="24"
+            width="24"
+            xmlns="http://www.w3.org/2000/svg"><polyline
+              points="22 12 18 12 15 21 9 3 6 12 2 12" /></svg>
+        </div>
      </div>
    </div>
-  </div>
-  <div class="w-full lg:w-1/4">
-    <div
-      class="widget w-full p-4 rounded-lg bg-white border border-grey-100 dark:bg-grey-895 dark:border-grey-890">
-      <div class="flex flex-row items-center justify-between">
-        <div class="flex flex-col">
-          <div class="text-xs uppercase font-light text-grey-500">
-            Session duration
+    <div class="w-full lg:w-1/4">
+      <div
+        class="widget w-full p-4 rounded-lg bg-white border border-grey-100 dark:bg-grey-895 dark:border-grey-890 dark:bg-gray-900 dark:text-white">
+        <div class="flex flex-row items-center justify-between">
+          <div class="flex flex-col">
+            <div class="text-xs uppercase font-light text-grey-500">
+              {$_('total-donations')}
+            </div>
+            <div class="text-xl font-bold">{stats.total_donation} €</div>
+          </div><svg
+            xmlns="http://www.w3.org/2000/svg"
+            height="24"
+            fill="currentColor"
+            width="24"><path d="M0 0h24v24H0z" fill="none" />
+            <path
+              d="M15 18.5A6.48 6.48 0 019.24 15H15v-2H8.58c-.05-.33-.08-.66-.08-1s.03-.67.08-1H15V9H9.24A6.491 6.491 0 0115 5.5c1.61 0 3.09.59 4.23 1.57L21 5.3A8.955 8.955 0 0015 3c-3.92 0-7.24 2.51-8.48 6H3v2h3.06a8.262 8.262 0 000 2H3v2h3.52c1.24 3.49 4.56 6 8.48 6 2.31 0 4.41-.87 6-2.3l-1.78-1.77c-1.13.98-2.6 1.57-4.22 1.57z" /></svg>
+        </div>
+      </div>
+    </div>
+    <div class="w-full lg:w-1/4">
+      <div
+        class="widget w-full p-4 rounded-lg bg-white border border-grey-100 dark:bg-grey-895 dark:border-grey-890 dark:bg-gray-900 dark:text-white">
+        <div class="flex flex-row items-center justify-between">
+          <div class="flex flex-col">
+            <div class="text-xs uppercase font-light text-grey-500">
+              {$_('total-distance')}
+            </div>
+            <div class="text-xl font-bold">
+              {stats.total_distance / 1000}
+              km
+            </div>
          </div>
-          <div class="text-xl font-bold">1m 24s</div>
-        </div><svg
-          stroke="currentColor"
-          fill="none"
-          stroke-width="2"
-          viewBox="0 0 24 24"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          size="24"
-          class="stroke-current text-grey-500"
-          height="24"
-          width="24"
-          xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="10" />
-          <polyline points="12 6 12 12 16 14" /></svg>
+          <svg
+            fill="currentColor"
+            xmlns="http://www.w3.org/2000/svg"
+            height="24"
+            width="24"><path d="M0 0h24v24H0z" fill="none" />
+            <path
+              d="M21 6H3c-1.1 0-2 .9-2 2v8c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 10H3V8h2v4h2V8h2v4h2V8h2v4h2V8h2v4h2V8h2v8z" /></svg>
+        </div>
      </div>
    </div>
+    <a href="/teams/" class="w-full lg:w-1/4">
+      <div
+        class="widget w-full p-4 rounded-lg bg-white border border-grey-100 dark:bg-grey-895 dark:border-grey-890 dark:bg-gray-900 dark:text-white">
+        <div class="flex flex-row items-center justify-between">
+          <div class="flex flex-col">
+            <div class="text-xs uppercase font-light text-grey-500">
+              {$_('count_teams')}
+            </div>
+            <div class="text-xl font-bold">{stats.total_teams}</div>
+          </div>
+          <svg
+            stroke="currentColor"
+            fill="none"
+            stroke-width="2"
+            viewBox="0 0 24 24"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            size="24"
+            class="stroke-current text-grey-500"
+            height="24"
+            width="24"
+            xmlns="http://www.w3.org/2000/svg"><path
+              d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
+            <circle cx="9" cy="7" r="4" />
+            <path d="M23 21v-2a4 4 0 0 0-3-3.87" />
+            <path d="M16 3.13a4 4 0 0 1 0 7.75" /></svg>
+        </div>
+      </div>
+    </a>
+    <a href="/orgs/" class="w-full lg:w-1/4">
+      <div
+        class="widget w-full p-4 rounded-lg bg-white border border-grey-100 dark:bg-grey-895 dark:border-grey-890 dark:bg-gray-900 dark:text-white">
+        <div class="flex flex-row items-center justify-between">
+          <div class="flex flex-col">
+            <div class="text-xs uppercase font-light text-grey-500">
+              {$_('count_organizations')}
+            </div>
+            <div class="text-xl font-bold">{stats.total_orgs}</div>
+          </div>
+          <svg
+            height="24"
+            fill="currentColor"
+            width="24"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z" />
+            <path
+              d="M17 11V3H7v4H3v14h8v-4h2v4h8V11h-4zM7 19H5v-2h2v2zm0-4H5v-2h2v2zm0-4H5V9h2v2zm4 4H9v-2h2v2zm0-4H9V9h2v2zm0-4H9V5h2v2zm4 8h-2v-2h2v2zm0-4h-2V9h2v2zm0-4h-2V5h2v2zm4 12h-2v-2h2v2zm0-4h-2v-2h2v2z" /></svg>
+        </div>
+      </div>
+    </a>
  </div>
-</div>
+{:catch error}
+  <div class="text-white px-6 py-4 border-0 rounded relative mb-4 bg-red-500">
+    <span class="inline-block align-middle mr-8">
+      <b class="capitalize">{$_('general_promise_error')}</b>
+      {error}
+    </span>
+  </div>
+{/await}
--- a/src/components/Table.svelte
+++ b/src/components/Table.svelte
@@ -32,7 +32,7 @@
              </th>
            </tr>
          </thead>
-          <tbody class="bg-white divide-y divide-gray-200">
+          <tbody class="divide-y divide-gray-200">
            <tr>
              <td class="px-6 py-4 whitespace-nowrap">
                <div class="flex items-center">
--- a/src/components/Tabs.svelte
+++ b/src/components/Tabs.svelte
@@ -0,0 +1,18 @@
+<h3 class="text-lg">Tabs</h3>
+<div
+  class="w-full flex sm:border-b sm:border-gray-300 relative flex-col sm:flex-row">
+  <div
+    class="flex-1 sm:text-center font-medium pb-3 cursor-pointer hover:text-blue-400 false">
+    1
+  </div>
+  <div
+    class="flex-1 sm:text-center font-medium pb-3 cursor-pointer hover:text-blue-400 false">
+    2
+  </div>
+  <div
+    class="flex-1 sm:text-center font-medium pb-3 cursor-pointer hover:text-blue-400 false">
+    3
+  </div>
+  <div
+    class="hidden sm:block absolute bottom-0 left-0 h-1 bg-blue-400 transition-transform duration-300 ease-out w-1/4 transform translate-x-double" />
+</div>
--- a/src/components/Tags.svelte
+++ b/src/components/Tags.svelte
@@ -0,0 +1,102 @@
+<div>
+  <div
+    class="text-xs inline-flex items-center font-bold leading-sm uppercase px-3 py-1 bg-blue-200 text-blue-700 rounded-full">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      class="feather feather-bell-off mr-2">
+      <path d="M13.73 21a2 2 0 0 1-3.46 0" />
+      <path d="M18.63 13A17.89 17.89 0 0 1 18 8" />
+      <path d="M6.26 6.26A5.86 5.86 0 0 0 6 8c0 7-3 9-3 9h14" />
+      <path d="M18 8a6 6 0 0 0-9.33-5" />
+      <line x1="1" y1="1" x2="23" y2="23" />
+    </svg>
+    Tag
+  </div>
+
+  <div
+    class="ml-4 text-xs inline-flex items-center font-bold leading-sm uppercase px-3 py-1 bg-green-200 text-green-700 rounded-full">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      class="feather feather-arrow-right mr-2">
+      <line x1="5" y1="12" x2="19" y2="12" />
+      <polyline points="12 5 19 12 12 19" />
+    </svg>
+    Tag
+  </div>
+
+  <div
+    class="ml-4 text-xs inline-flex items-center font-bold leading-sm uppercase px-3 py-1 bg-orange-200 text-orange-700 rounded-full">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      class="feather feather-activity mr-2">
+      <polyline points="22 12 18 12 15 21 9 3 6 12 2 12" />
+    </svg>
+    Tag
+  </div>
+
+  <div
+    class="ml-4 text-xs inline-flex items-center font-bold leading-sm uppercase px-3 py-1 bg-red-200 text-red-700 rounded-full">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      class="feather feather-archive mr-2">
+      <polyline points="21 8 21 21 3 21 3 8" />
+      <rect x="1" y="3" width="22" height="5" />
+      <line x1="10" y1="12" x2="14" y2="12" />
+    </svg>
+    Tag
+  </div>
+
+  <div
+    class="ml-4 text-xs inline-flex items-center font-bold leading-sm uppercase px-3 py-1 rounded-full bg-white text-gray-700 border">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      class="feather feather-hard-drive mr-2">
+      <line x1="22" y1="12" x2="2" y2="12" />
+      <path
+        d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z" />
+      <line x1="6" y1="16" x2="6.01" y2="16" />
+      <line x1="10" y1="16" x2="10.01" y2="16" />
+    </svg>
+    Tag
+  </div>
+</div>
--- a/src/components/Teams.svelte
+++ b/src/components/Teams.svelte
@@ -0,0 +1,10 @@
+<script>
+  import { _ } from "svelte-i18n";
+</script>
+
+<section class="container p-5">
+  <span class="mb-1 text-3xl font-extrabold leading-tight">
+    {$_('teams')}
+  </span>
+  <p class="mb-8 text-lg text-gray-500">everything is more fun together 🏃‍♂️🏃‍♀️🏃‍♂️</p>
+</section>
--- a/src/components/Test.svelte
+++ b/src/components/Test.svelte
@@ -0,0 +1,5 @@
+<script>
+  import { _, locale } from "svelte-i18n";
+</script>
+
+<div>$locale $_('hallo')</div>
--- a/src/components/Tmp.svelte
+++ b/src/components/Tmp.svelte
@@ -1,22 +0,0 @@
-<script>
-  import { OpenAPI, TrackService } from "@odit/lfk-client-js";
-  OpenAPI.BASE = "http://localhost:4010";
-  let tracks_promise = TrackService.trackControllerGetAll();
-</script>
-
-<h1>Tracks</h1>
-{#await tracks_promise then tracks}
-  <h4>{tracks.length}</h4>
-  <hr />
-  {#if tracks.length % 2 == 0}
-    <ul>
-      {#each tracks as item}
-        <li>{item.distance}</li>
-      {/each}
-    </ul>
-  {:else}
-    {#each tracks as item}<span>{item.distance}</span><br />{/each}
-  {/if}
-{:catch error}
-  ERORRRRR
-{/await}
--- a/src/components/Tracks.svelte
+++ b/src/components/Tracks.svelte
@@ -1,29 +1,188 @@
 <script>
-  import { OpenAPI, TrackService } from "@odit/lfk-client-js";
-  OpenAPI.BASE = "http://localhost:4010";
-  let tracks_promise = TrackService.trackControllerGetAll();
+  import { _, json } from "svelte-i18n";
+  import Toastify from "toastify-js";
+  import TracksEmptyState from "./TracksEmptyState.svelte";
+  import { TrackService } from "@odit/lfk-client-js";
+  const tracks_promise = TrackService.trackControllerGetAll();
+  import { getlang } from "./datatable_i18n";
+  import { Grid, html } from "gridjs";
+  import "gridjs/dist/theme/mermaid.css";
+  import { tracks as tracksstore } from "../store.js";
+  $: trackscache = [];
+  $: blocked = [];
+  let table;
+  let datatable;
+  let datatable_inited = false;
+  tracksstore.subscribe((val) => {
+    trackscache = val;
+    setTimeout(() => {
+      if (val.length > 0) {
+        renderdatatable();
+      }
+    }, 100);
+  });
+  tracks_promise.then((data) => {
+    tracksstore.set(data);
+  });
+  window.track__edit_cancel = () => renderdatatable();
+  window.track__edit_save = () => {
+    const trackid = parseInt(window.event.target.getAttribute("data-trackid"));
+    if (blocked.includes(trackid)) {
+      //
+    } else {
+      blocked.push(trackid);
+      const elem = document.querySelector(
+        `[data-id="triggered_table_actions_${trackid}"]`
+      ).parentNode.parentNode.parentNode;
+      Toastify({
+        text: "Track is being updated...",
+        duration: 500,
+      }).showToast();
+      TrackService.trackControllerPut(trackid, {
+        id: trackid,
+        name: elem.childNodes[0].childNodes[0].value,
+        distance: parseInt(elem.childNodes[1].childNodes[0].value),
+        minimumLapTime: parseInt(elem.childNodes[2].childNodes[0].value),
+      })
+        .then((r) => {
+          Toastify({
+            text: "Track was updated!",
+            backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
+            duration: 1000,
+          }).showToast();
+          blocked = blocked.filter((e) => e !== trackid);
+          document
+            .querySelector(`[data-id="default_table_actions_${trackid}"]`)
+            .classList.remove("hidden");
+          document
+            .querySelector(`[data-id="triggered_table_actions_${trackid}"]`)
+            .classList.add("hidden");
+          //
+          elem.childNodes[0].innerHTML = `<td data-column-id="trackName" class="gridjs-td">${elem.childNodes[0].childNodes[0].value}</td>`;
+          elem.childNodes[1].innerHTML = `<td data-column-id="trackName" class="gridjs-td">${elem.childNodes[1].childNodes[0].value}</td>`;
+          elem.childNodes[2].innerHTML = `<td data-column-id="trackName" class="gridjs-td">${elem.childNodes[2].childNodes[0].value}</td>`;
+        })
+        .catch((err) => {
+          console.error(err);
+        });
+    }
+  };
+  window.track__delete_handler = () => {
+    const trackid = parseInt(window.event.target.getAttribute("data-trackid"));
+    document
+      .querySelector(`[data-id="default_table_actions_${trackid}"]`)
+      .classList.add("hidden");
+    document
+      .querySelector(`[data-id="deleteconfirmation_table_actions_${trackid}"]`)
+      .classList.remove("hidden");
+  };
+  window.track__delete_cancel = () => {
+    const trackid = parseInt(window.event.target.getAttribute("data-trackid"));
+    document
+      .querySelector(`[data-id="default_table_actions_${trackid}"]`)
+      .classList.remove("hidden");
+    document
+      .querySelector(`[data-id="deleteconfirmation_table_actions_${trackid}"]`)
+      .classList.add("hidden");
+  };
+  window.track__delete_confirm = () => {
+    const trackid = parseInt(window.event.target.getAttribute("data-trackid"));
+    TrackService.trackControllerRemove(trackid)
+      .then(() => {
+        const newStoreVal = trackscache.filter((obj) => obj.id !== trackid);
+        tracksstore.set(newStoreVal);
+        renderdatatable();
+      })
+      .catch((err) => {
+        console.log(err);
+      });
+  };
+  window.track__edit_handler = () => {
+    const trackid = parseInt(window.event.target.getAttribute("data-trackid"));
+    document
+      .querySelector(`[data-id="default_table_actions_${trackid}"]`)
+      .classList.add("hidden");
+    document
+      .querySelector(`[data-id="triggered_table_actions_${trackid}"]`)
+      .classList.remove("hidden");
+    const elem = document.querySelector(
+      `[data-id="triggered_table_actions_${trackid}"]`
+    ).parentNode.parentNode.parentNode;
+    const trackname = elem.childNodes[0].textContent;
+    const tracklength = parseInt(elem.childNodes[1].textContent);
+    const trackmintime = parseInt(elem.childNodes[2].textContent);
+    elem.childNodes[0].innerHTML = `<input type="text" value="${trackname}" name="trackname" class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2">`;
+    elem.childNodes[1].innerHTML = `<input type="text" value="${tracklength}" name="tracklength" class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2">`;
+    elem.childNodes[2].innerHTML = `<input type="text" value="${trackmintime}" name="trackmintime" class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2">`;
+  };
+  //
+  function renderdatatable() {
+    let tabledata = [];
+    trackscache.forEach((track) => {
+      tabledata.push([
+        track.name,
+        track.distance,
+        track.minimumLapTime || 0,
+        html(`
+        <div class="hidden" data-id="triggered_table_actions_${track.id}">
+          <button class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-green-400 text-base font-medium text-white sm:w-auto sm:text-sm" data-trackid="${track.id}" onclick="track__edit_save()">Save</button>
+          <button class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-500 text-base font-medium text-white sm:w-auto sm:text-sm" data-trackid="${track.id}" onclick="track__edit_cancel()">Cancel</button>
+        </div>
+        <div data-id="default_table_actions_${track.id}">
+          <button class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-gray-400 text-base font-medium text-white sm:w-auto sm:text-sm" data-trackid="${track.id}" onclick="track__edit_handler()">Edit</button>
+          <button class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-500 text-base font-medium text-white sm:w-auto sm:text-sm" data-trackid="${track.id}" onclick="track__delete_handler()">Delete</button>
+        </div>
+        <div class="hidden" data-id="deleteconfirmation_table_actions_${track.id}">
+          <button class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-gray-400 text-base font-medium text-white sm:w-auto sm:text-sm" data-trackid="${track.id}" onclick="track__delete_cancel()">Cancel</button>
+          <button class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-500 text-base font-medium text-white sm:w-auto sm:text-sm" data-trackid="${track.id}" onclick="track__delete_confirm()">Confirm</button>
+        </div>
+      `),
+      ]);
+    });
+
+    if (datatable_inited === false) {
+      datatable = new Grid({
+        columns: [
+          $_("track-name"),
+          $_("track-length-in-m"),
+          $_("minimum-lap-time-in-s"),
+          $_("action"),
+        ],
+        language: getlang($json("datatable")),
+        sort: true,
+        search: { enabled: true },
+        data: tabledata,
+        pagination: {
+          enabled: true,
+          limit: 25,
+          summary: false,
+        },
+      }).render(table);
+      datatable_inited = true;
+    } else {
+      datatable.updateConfig({ data: tabledata }).forceRender();
+    }
+  }
 </script>

-<h1>Tracks</h1>
+{#if trackscache.length > 0}
+  <div bind:this={table} />
+{/if}
 {#await tracks_promise}
  <div
    class="bg-teal-lightest border-t-4 border-teal rounded-b text-teal-darkest px-4 py-3 shadow-md my-2"
    role="alert">
-    <p class="font-bold">track data is being loaded...</p>
-    <p class="text-sm">This might take a moment 👀</p>
+    <p class="font-bold">{$_('track-data-is-being-loaded')}</p>
+    <p class="text-sm">{$_('this-might-take-a-moment')}</p>
  </div>
-{:then tracks}
-  <h4>{tracks.length}</h4>
-  <hr />
-  <ul>
-    {#each tracks as item}
-      <li>{item.distance}</li>
-    {/each}
-  </ul>
+{:then}
+  {#if trackscache.length === 0}
+    <TracksEmptyState />
+  {/if}
 {:catch error}
  <div class="text-white px-6 py-4 border-0 rounded relative mb-4 bg-red-500">
    <span class="inline-block align-middle mr-8">
-      <b class="capitalize">😢 Error</b>
+      <b class="capitalize">{$_('general_promise_error')}</b>
      {error}
    </span>
  </div>
--- a/src/components/TracksEmptyState.svelte
+++ b/src/components/TracksEmptyState.svelte
@@ -0,0 +1,260 @@
+<script>
+  import { _ } from "svelte-i18n";
+  import AddTrackModal from "./AddTrackModal.svelte";
+  let modal_open = false;
+</script>
+
+<div class="text-center items-center justify-center">
+  <svg
+    class="mx-auto"
+    style="height:15rem;"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 997 808"><defs>
+      <linearGradient
+        id="a"
+        x1="570.56"
+        y1="454"
+        x2="570.56"
+        y2="63.07"
+        gradientUnits="userSpaceOnUse">
+        <stop offset="0" stop-color="gray" stop-opacity=".25" />
+        <stop offset=".54" stop-color="gray" stop-opacity=".12" />
+        <stop offset="1" stop-color="gray" stop-opacity=".1" />
+      </linearGradient>
+    </defs>
+    <path
+      d="M260.64.9c93 12.73 168.51 101.25 252.3 156.49 18.67 12.31 38.24 23.15 58.93 26.36 68.54 10.64 131.74-63.09 200.6-57.07 55.81 4.88 103.14 64 123.22 133.54s17 147.32 5.85 220.32c-17.46 114-56.14 226.15-123.47 300.3-11.11 12.24-23.52 23.69-37.79 26.47-23.78 4.69-45.83-15.46-66.41-32.12-92.88-75.22-210.3-94.32-314-51.08-35.12 14.64-68.71 36-104.65 46.54-69.21 20.26-147.53-5.34-194.52-76s-54.63-186.8-9.86-260c18.69-30.55 44.45-52.12 64.07-81.6 49.3-74 31.1-148.82 25-235.6C133.9 31.94 206.31-6.53 260.64.9z"
+      fill="#4299e1"
+      opacity=".1" />
+    <g opacity=".2">
+      <path
+        d="M683.38 545s27.51 27.51 12 68.33S722 722.03 722 722.03l-1.29-.21c-56.5-10-84.57-74.59-53.15-122.59 11.66-17.81 21.25-38.75 15.82-54.23z"
+        fill="#4299e1" />
+      <path
+        d="M683.38 545.5s27.51 27.51 12 68.33S722 722.53 722 722.53l-1.29-.21c-56.5-10-84.57-74.59-53.15-122.59 11.66-17.86 21.25-38.79 15.82-54.23z"
+        opacity=".1" />
+      <path
+        d="M683.38 545s15.53 33.72 0 61.23-2.66 104.71 38.6 115.8"
+        fill="none"
+        stroke="#535461"
+        stroke-miterlimit="10" />
+      <path
+        d="M634.39 656.3s31.39-5 34.25 23.13 60.36 32 60.36 32l-1.08.72c-47.48 31.17-92.86 19.85-86-21.53 2.53-15.35 2.32-30.81-7.53-34.32z"
+        fill="#4299e1" />
+      <path
+        d="M634.39 656.3s24.37 5.35 22.36 27.5 36.18 48.71 72.25 27.66"
+        fill="none"
+        stroke="#535461"
+        stroke-miterlimit="10" />
+    </g>
+    <g opacity=".2">
+      <path
+        d="M357.1 501.68s22.86 22.86 10 56.77 22.12 90.32 22.12 90.32l-1.07-.18c-46.94-8.29-70.27-62-44.17-101.86 9.66-14.83 17.63-32.22 13.12-45.05z"
+        fill="#4299e1" />
+      <path
+        d="M357.1 502.06s22.86 22.86 10 56.77 22.12 90.32 22.12 90.32l-1.12-.15c-46.94-8.29-70.27-62-44.17-101.86 9.71-14.86 17.68-32.25 13.17-45.08z"
+        opacity=".1" />
+      <path
+        d="M357.1 501.68s12.9 28 0 50.87-2.21 87 32.07 96.22"
+        fill="none"
+        stroke="#535461"
+        stroke-miterlimit="10" />
+      <path
+        d="M316.39 594.13s26.11-4.13 28.46 19.22S395 640 395 640l-.9.6c-39.45 25.9-77.16 16.5-71.47-17.89 2.11-12.83 1.94-25.71-6.24-28.58z"
+        fill="#4299e1" />
+      <path
+        d="M316.39 594.13s20.24 4.44 18.58 22.85 30.06 40.48 60 23"
+        fill="none"
+        stroke="#535461"
+        stroke-miterlimit="10" />
+    </g>
+    <g opacity=".2">
+      <path
+        d="M261.1 357.68s22.86 22.86 10 56.77 22.12 90.32 22.12 90.32l-1.07-.18c-46.94-8.29-70.27-62-44.17-101.86 9.66-14.83 17.63-32.22 13.12-45.05z"
+        fill="#4299e1" />
+      <path
+        d="M261.1 358.06s22.86 22.86 10 56.77 22.12 90.32 22.12 90.32l-1.12-.15c-46.94-8.29-70.27-62-44.17-101.86 9.71-14.86 17.68-32.25 13.17-45.08z"
+        opacity=".1" />
+      <path
+        d="M261.1 357.68s12.9 28 0 50.87-2.21 87 32.07 96.22"
+        fill="none"
+        stroke="#535461"
+        stroke-miterlimit="10" />
+      <path
+        d="M220.39 450.13s26.11-4.13 28.46 19.22S299 496 299 496l-.9.6c-39.45 25.9-77.16 16.5-71.47-17.89 2.11-12.83 1.94-25.71-6.24-28.58z"
+        fill="#4299e1" />
+      <path
+        d="M220.39 450.13s20.24 4.44 18.58 22.85 30.06 40.48 60 23"
+        fill="none"
+        stroke="#535461"
+        stroke-miterlimit="10" />
+    </g>
+    <path
+      fill="#dfe5ee"
+      d="M14.76 592.38v-13.63l279.29-78.33 49.95-5.68v12.49l-278.15 99.9-51.09-14.75z" />
+    <path
+      opacity=".05"
+      d="M14.76 592.38v-13.63l279.29-78.33 49.95-5.68v12.49l-278.15 99.9-51.09-14.75z" />
+    <path
+      fill="#dfe5ee"
+      d="M14.76 578.75l279.29-91.96 48.82 7.95-277.02 98.77-51.09-14.76z" />
+    <path
+      fill="#dfe5ee"
+      d="M57.9 370.99h18.17v211.17H57.9zM275.88 322.17h18.17v185.06h-18.17z" />
+    <path
+      fill="#dfe5ee"
+      d="M339.46 264.27v56.77L112.67 371.7l-26.83 6-66.54 14.86L0 386.88v-65.84l102.91-19.62 25.61-4.88 187.1-35.67 23.84 3.4z" />
+    <path
+      opacity=".05"
+      d="M339.46 264.27v56.77L112.67 371.7l-26.83 6-66.54 14.86L0 386.88v-65.84l102.91-19.62 25.61-4.88 187.1-35.67 23.84 3.4z" />
+    <path
+      opacity=".05"
+      d="M76.07 370.99v11.16l-18.17 4.06v-15.22h18.17zM294.05 322.17v11.29l-18.17 4.05v-15.34h18.17z" />
+    <path
+      fill="#dfe5ee"
+      d="M339.46 264.27v56.77l-92.08 20.57-26.78 5.98-107.93 24.11-26.83 6-66.54 14.86 1.14-64.71 92.47-18.43 25.87-5.15h.01L244.5 283.2l25.82-5.15 69.14-13.78z" />
+    <path
+      fill="#4299e1"
+      d="M138.79 304.27l-26.12 67.43-26.83 6 27.07-68.28-10-8 25.61-4.88 10.26 7.73h.01zM271.62 279.03l-24.24 62.58-26.78 5.98 25.14-63.41-1.24-.98-8.76-7.02 25.61-4.88 8.97 6.75 1.29.98h.01z" />
+    <path
+      opacity=".05"
+      d="M61.88 578.47l18.16-4.26v4.26l-18.16 4.26v-4.26zM278.72 503.54l18.16-4.26v4.26l-18.16 4.26v-4.26z" />
+    <path
+      d="M761.23 394.51c-28.95 15.25-58.92-2-58.92-2a19.07 19.07 0 01-1.61 2.52c-.37-.28-.75-.57-1.13-.88-12.44-10.17-26.21-34.18-26.21-34.18l-26.83-50.31a78.52 78.52 0 01-7.37-19.19c-4.42-19.18-18.53-20-18.53-20H604.1c-8 0-19.56 1.68-31 4a2.1 2.1 0 00.57-1.14l-.55.11 6.14-6s17.57-7.12 19.64-22.37l9.3-9.15s.3-.8.72-2.21l3.09-3.89c13.46-16.85 14.43-17.13 14.43-17.13l40.81-24.15s14.65-2.08 8.54-43.05-2-46-2-46 11.1-41.05-10.18-35.94-11.66 40.2-11.66 40.2l1.48 7.75a74.2 74.2 0 01-.3 29.35c-2.21 10.45-4.68 23.36-4.06 26.44 1.09 5.37-11.2 12.17-11.2 12.17l-6.95 4.06a35.17 35.17 0 01-24.39 4.16l-.37-.56L602 184a12.05 12.05 0 00-.3 1.3L600 184v.1c0-.36 0-.7.08-1.08a53.88 53.88 0 012.69-11.28c.11-.34.25-.7.37-1A30.72 30.72 0 00632 140.29a30 30 0 00-1.52-9.44 6.51 6.51 0 002.38 0c3.74-.6 7.71-2.52 9.65-5.83a10.7 10.7 0 00-.79-11.72 11.71 11.71 0 00-1.6-1.67c-3.55-4-9.49-5-14.21-7.69-4.49-2.53-7.9-6.57-12.08-9.58-7.9-5.71-18-7.43-27.64-9-4.14-.67-8.35-1.34-12.51-.79-5.26.7-10.1 3.33-14.22 6.62a12.8 12.8 0 00-3.59 3.95c-1.53 3-.86 6.52-1.13 9.84-.66 8.08-7 14.66-14 18.95-4.3 2.63-9 4.73-12.61 8.26s-5.74 9.1-3.49 13.56c1.19 2.36 3.54 4.33 3.56 7a7.84 7.84 0 01-1 3.34 48.67 48.67 0 01-9.59 13.5c-14.6-3.52-30.36 4.22-30.36 4.22l-47.55 2s-13.44-6.1-31 31.52-23.78 39.66-23.78 39.66-32 28.47-11.37 35.59 32-27.46 32-27.46L417 233.84s25.84-24.41 27.91-29.49 14.47-5.08 14.47-5.08l50.41 2a9.59 9.59 0 01.12 1.23c.12 5.64-5.17 10-10.49 12.09-3.36 1.34-7.2 2.35-9.25 5.29s-1.56 7.21.5 10.21a13.42 13.42 0 002.19 2.43 20.53 20.53 0 007.72 5 35.81 35.81 0 007.51 2.08 76 76 0 01-4.25 12.6l2 .86-.66 1.76c-2.82 7.49-8.63 22.27-13.77 31.21-.05 0-9.34 7.88-16.55 15-5.51 5.42-18.79 57.6 20.07 58.54l8.87 6.54h.18c7.89 11.14 33.94 29.44 33.94 29.44l-46.07 2.72a57.66 57.66 0 00-6.85.83q-1.13.2-2.26.45c-8.12 1.78-17.11 1.15-21.93.58-3.19-6-18-3.56-18-3.56s-2.07 30.51 1 47.79 14.47 6.1 14.47 6.1c-2.07-15.25 15-26.47 15-26.47 2.17-1.09 4.74-2.41 7.76-4 9.58-5.14 55.15 2.72 69.24 5.32a47.65 47.65 0 009.41.8c40.39-.66 29.9-20.36 29.9-20.36l-8.13-16a82.22 82.22 0 01-3.56-8.18c-7.18-19-18.34-29.46-26.89-35.06.46-.58.92-1.16 1.37-1.77 0 0-.68-.16-1.71-.47 7.22-3.69 12-6.64 12-6.64s47.55-28.47 45.49-21.35 10.34 34.57 33.08 53.89c.66.56 1.3 1.13 1.94 1.71l.62.57 1.27 1.2.69.67 1.18 1.18.66.68 1.25 1.34.5.54q.85.94 1.68 1.9l.36.43q.64.76 1.27 1.52l.57.71 1 1.28.58.75 1 1.31.52.69 1.16 1.61.28.38q.71 1 1.39 2l.34.51 1 1.51.42.65.89 1.4.39.62.93 1.53.27.44q1.21 2 2.3 4l.12.22.95 1.72.15.28.91 1.72.06.12a151.46 151.46 0 016.87 15.07 26.4 26.4 0 01-3.53.6c-6.2 27.46 10.34 27.46 10.34 27.46s61-9.15 83.74-32.54-4.08-21.44-4.08-21.44z"
+      transform="translate(-101.5 -46)"
+      fill="url(#a)" />
+    <path
+      d="M438.5 296.5s25.14 6.52 37.68 40.22a81.56 81.56 0 003.45 8l7.87 15.78s10.15 19.37-28.92 20a45.36 45.36 0 01-9.1-.79c-13.63-2.55-57.71-10.28-67-5.23a172.92 172.92 0 01-16 8l-11-12 4-16s13.21 2.48 24.62-.07a55.86 55.86 0 018.81-1.26l44.59-2.65s-35-25-35-34 36-20 36-20z"
+      fill="#f8bdc5" />
+    <path
+      d="M363.5 357.5s-11 17.94 11.49 21c0 0-16.49 11-14.49 26 0 0-11 11-14-6s-1-47-1-47 18-3 18 6z"
+      opacity=".05" />
+    <path
+      d="M438.5 296.5s25.14 6.52 37.68 40.22a81.56 81.56 0 003.45 8l7.87 15.78s10.15 19.37-28.92 20a45.36 45.36 0 01-9.1-.79c-13.63-2.55-57.71-10.28-67-5.23a172.92 172.92 0 01-16 8l-11-12 4-16s13.21 2.48 24.62-.07a55.86 55.86 0 018.81-1.26l44.59-2.65s-35-25-35-34 36-20 36-20z"
+      opacity=".05" />
+    <path
+      d="M360.5 372.5l4-16s13.21 2.48 24.62-.07a55.86 55.86 0 018.81-1.26l44.57-2.67s-35-25-35-34 36-20 36-20l.27.08a32.74 32.74 0 00-5.27-2.08s-36 11-36 20 35 34 35 34l-44.56 2.67a55.86 55.86 0 00-8.81 1.26c-11.41 2.55-24.62.07-24.62.07l-4 16 11 12s.74-.3 2.26-1z"
+      opacity=".05" />
+    <path
+      d="M363.5 357.5s-11 17.94 11.49 21c0 0-16.49 11-14.49 26 0 0-11 11-14-6s-1-47-1-47 18-3 18 6z"
+      fill="#ffd97b" />
+    <path
+      fill="#dfe5ee"
+      d="M333.76 647.38v-13.63l279.29-78.33 49.95-5.68v12.49l-278.15 99.9-51.09-14.75z" />
+    <path
+      opacity=".05"
+      d="M333.76 647.38v-13.63l279.29-78.33 49.95-5.68v12.49l-278.15 99.9-51.09-14.75z" />
+    <path
+      fill="#dfe5ee"
+      d="M333.76 633.75l279.29-91.96 48.82 7.95-277.02 98.77-51.09-14.76z" />
+    <path
+      fill="#dfe5ee"
+      d="M376.9 425.99h18.17v211.17H376.9zM594.88 377.17h18.17v185.06h-18.17z" />
+    <path
+      fill="#dfe5ee"
+      d="M658.46 319.27v56.77L431.67 426.7l-26.83 6-66.54 14.86-19.3-5.68v-65.84l102.9-19.62 25.62-4.88 187.1-35.67 23.84 3.4z" />
+    <path
+      opacity=".05"
+      d="M658.46 319.27v56.77L431.67 426.7l-26.83 6-66.54 14.86-19.3-5.68v-65.84l102.9-19.62 25.62-4.88 187.1-35.67 23.84 3.4z" />
+    <path
+      opacity=".05"
+      d="M395.07 425.99v11.16l-18.17 4.06v-15.22h18.17zM613.05 377.17v11.29l-18.17 4.05v-15.34h18.17z" />
+    <path
+      fill="#dfe5ee"
+      d="M658.46 319.27v56.77l-92.08 20.57-26.78 5.98-107.93 24.11-26.83 6-66.54 14.86 1.14-64.71 92.47-18.43 25.87-5.15h.01L563.5 338.2l25.82-5.15 69.14-13.78z" />
+    <path
+      fill="#4299e1"
+      d="M457.79 359.27l-26.12 67.43-26.83 6 27.07-68.28-10.01-8 25.62-4.88 10.26 7.73h.01zM590.62 334.03l-24.24 62.58-26.78 5.98 25.14-63.41-1.24-.98-8.76-7.02 25.61-4.88 8.97 6.75 1.29.98h.01z" />
+    <path
+      opacity=".05"
+      d="M380.88 633.47l18.16-4.26v4.26l-18.16 4.26v-4.26zM597.72 558.54l18.16-4.26v4.26l-18.16 4.25v-4.25z" />
+    <path
+      d="M562.63 146.9l-39.48 23.75s-.94.28-14 16.85l-4.69 6c-9.92 12.75-30.54 17-30.54 17l-13.08-20.12-2.76-24.44 2.9-9.87 2.3-7.82 20.12 2.88 8.1 4.37 10-10c.78.21 1.57.4 2.36.55a33.55 33.55 0 0023.59-4.05l6.72-4s11.88-6.69 10.83-12c-.6-3 1.79-15.72 3.93-26a74.16 74.16 0 00.29-28.86l-1.43-7.62S538.5 29 559.07 24s9.85 35.34 9.85 35.34-3.94 4.94 2 45.23-8.29 42.33-8.29 42.33z"
+      fill="#f8bdc5" />
+    <path
+      d="M497.55 141.54c-1.12 10.58 3.95 12 3.95 12l3 12v13l-9 15h-22l-19-9v-42l-3-10a38.7 38.7 0 005-.65c9.65-1.93 15.12-7.29 18.2-13.11 4.8-9.11 3.8-19.28 3.8-19.28s40-11 26 20c-1.86 4.13-3.28 7.76-4.35 11a53.72 53.72 0 00-2.6 11.04zM472.09 229.33a2.08 2.08 0 01-.59 1.17 8.65 8.65 0 00-1.29 2c-4.68 8.83-13.71 40-13.71 40l-49-18-.71-.18-19.29-4.82c5.47-3.91 14.61-27.36 18.33-37.42 1-2.81 1.67-4.58 1.67-4.58l52 5s13.48 11.8 12.59 16.83z"
+      fill="#f8bdc5" />
+    <path
+      d="M451.5 129.5s-15 6-30 0-33 3-33 3l-46 2s-13-6-30 31-23 39-23 39-31 28-11 35 31-27 31-27l11-21s25-24 27-29 14-5 14-5l50 2-.31 14.62 15.31 13.38 14-12 11-22z"
+      fill="#f8bdc5" />
+    <path
+      d="M504.5 119.5c-1.86 4.13-3.28 7.76-4.35 11h-1.65a29.92 29.92 0 01-23.81-11.76c4.81-9.07 3.81-19.24 3.81-19.24s40-11 26 20z"
+      opacity=".1" />
+    <circle cx="498.5" cy="99.5" r="30" fill="#f8bdc5" />
+    <path
+      d="M472.09 229.33a2.08 2.08 0 01-.59 1.17 8.65 8.65 0 00-1.29 2c-17.79-.78-56.72-17.11-64.38-20.38 1-2.81 1.67-4.58 1.67-4.58l52 5s13.48 11.76 12.59 16.79zM509.19 187.5l-4.69 6c-9.92 12.75-30.54 17-30.54 17l-13.08-20.12-2.76-24.44L459 142c2.79 13 10.59 40.12 22.5 42.5 19.91 4 18.48-24.53 17.5-36.5a16.2 16.2 0 01.5-5.5l4 3 .36.55c9.53 14.8 7.39 32.42 5.33 41.45z"
+      opacity=".1" />
+    <path
+      d="M456.5 127.5h-10s10 64-37 46c0 0 4 15-5 36 0 0 48 21 67 21l6-6s17-7 19-22l9-9s10-27-4-48l-4-3a16.16 16.16 0 00-.5 5.5c1 12 2.41 40.48-17.5 36.5-25-5-23-57-23-57z"
+      fill="#eb6576" />
+    <path
+      d="M388.5 309.5l16 12s26 8 47-21c0 0-13-3-11-10s-52 19-52 19z"
+      fill="#5e52ad" />
+    <path
+      d="M388.5 309.5l16 12s26 8 47-21c0 0-13-3-11-10s-52 19-52 19z"
+      opacity=".05" />
+    <path
+      d="M472.09 230.33a2.08 2.08 0 01-.59 1.17c-4 4-15 42-15 42l-49-18-.71-.18a70.21 70.21 0 0112-6.06c3.41-1.32 6.84-2.72 9.81-4.06a44.92 44.92 0 006.91-3.7c4.19-3 20.28-7.8 36.58-11.17z"
+      opacity=".1" />
+    <path
+      d="M585.5 372.5l-15 4s-.34-1-1-2.74c-3.2-8.14-13.86-32.61-32-48.26-22-19-34-46-32-53s-44 21-44 21-33.35 20.75-55.39 20.78a23.28 23.28 0 01-9.61-1.78c-8.5-3.83-11.94-10.54-13.09-17a29.72 29.72 0 016-23.31 68.38 68.38 0 0129.4-21.93c3.41-1.32 6.84-2.72 9.81-4.06a44.92 44.92 0 006.91-3.7c7-5 47-15 66-15h16s13.64.8 17.92 19.66a78 78 0 007.1 18.84l25.95 49.5s13.32 23.61 25.35 33.61c3.43 2.86 6.76 4.61 9.65 4.39 13-1-18 19-18 19z"
+      fill="#f8bdc5" />
+    <path
+      d="M538.66 84.52A10.67 10.67 0 00537.9 73c-3.36-4.37-9.43-5.37-14.22-8.11-4.35-2.49-7.64-6.46-11.68-9.42-7.64-5.61-17.38-7.31-26.73-8.84-4-.66-8.08-1.32-12.1-.77-5.09.69-9.77 3.28-13.76 6.51a12.52 12.52 0 00-3.47 3.88c-1.48 2.92-.83 6.42-1.09 9.68-.64 7.95-6.78 14.42-13.55 18.63-4.16 2.59-8.74 4.65-12.2 8.12s-5.55 8.95-3.37 13.33c1.16 2.32 3.43 4.26 3.44 6.86a7.8 7.8 0 01-.94 3.29 47.87 47.87 0 01-9.54 13.55c-3.54 3.52-7.77 6.68-9.61 11.33-1.77 4.47-1 9.57.63 14.1.76 2.16 1.71 4.32 1.75 6.6.11 5.55-5 9.81-10.15 11.89-3.25 1.31-7 2.31-8.95 5.2s-1.51 7.09.48 10 5.2 4.86 8.5 6.19a31.16 31.16 0 0019.38 1.58 23.74 23.74 0 0015.15-11.78c3-5.84 3.2-13 7.36-18.1 7.33-8.91 22.79-6.66 30.44-15.31 6.14-6.95 4.47-17.48 4-26.74a82.37 82.37 0 01.64-15.45c.5-3.64 1.42-7.55 4.28-9.85 2.31-1.86 5.43-2.28 8.37-2.64 6.14-.77 13.21-2.26 16-7.79 1.16-2.3 1.51-5.2 3.6-6.7 2.89-2.08 6.94 0 9.46 2.5 2.78 2.77 5.11 6.18 9.34 5.49 3.59-.56 7.43-2.45 9.3-5.71z"
+      opacity=".1" />
+    <path
+      d="M537.58 83.44a10.67 10.67 0 00-.77-11.52c-3.36-4.37-9.43-5.37-14.22-8.11-4.35-2.49-7.64-6.46-11.68-9.42-7.64-5.61-17.38-7.31-26.73-8.84-4-.66-8.08-1.32-12.1-.77-5.09.69-9.77 3.28-13.76 6.51a12.52 12.52 0 00-3.47 3.88c-1.48 2.92-.83 6.42-1.09 9.68-.64 7.95-6.78 14.42-13.55 18.63-4.16 2.59-8.74 4.65-12.2 8.12s-5.55 8.95-3.37 13.33c1.16 2.32 3.43 4.26 3.44 6.86a7.8 7.8 0 01-.94 3.29 47.87 47.87 0 01-9.54 13.55c-3.54 3.52-7.77 6.68-9.61 11.33-1.77 4.47-1 9.57.63 14.1.76 2.16 1.71 4.32 1.75 6.6.11 5.55-5 9.81-10.15 11.89-3.25 1.31-7 2.31-8.95 5.2s-1.51 7.09.48 10 5.2 4.86 8.5 6.19a31.16 31.16 0 0019.38 1.58 23.74 23.74 0 0015.15-11.78c3-5.84 3.2-13 7.36-18.1 7.33-8.91 22.79-6.66 30.44-15.31 6.14-6.95 4.47-17.48 4-26.74a82.37 82.37 0 01.64-15.45c.5-3.64 1.42-7.55 4.28-9.85 2.31-1.86 5.43-2.28 8.37-2.64 6.14-.77 13.21-2.26 16-7.79 1.16-2.3 1.51-5.2 3.6-6.7 2.89-2.08 6.94 0 9.46 2.5 2.78 2.77 5.11 6.18 9.34 5.49 3.59-.57 7.44-2.46 9.31-5.71z"
+      fill="#6e464e" />
+    <path d="M434 202s11 9 25 8" opacity=".1" />
+    <path
+      d="M605.92 353.68c-5.74 5.64-18.42 13.82-18.42 13.82l-15 4s-11-32-33-51-34-46-32-53-44 21-44 21-33.35 20.75-55.39 20.78a23.28 23.28 0 01-9.61-1.78c-8.5-3.83-11.94-10.54-13.09-17a28.68 28.68 0 01.82-13.31 29.19 29.19 0 00-2.82 18.31c1.15 6.46 4.59 13.17 13.09 17a23.28 23.28 0 009.61 1.78c22 0 55.39-20.78 55.39-20.78s46-28 44-21 10 34 32 53 33 51 33 51l15-4s25.89-16.71 20.42-18.82z"
+      opacity=".05" />
+    <path
+      d="M429.5 246.5l-1.7.79a61.63 61.63 0 00-28.9 27.46c-13.4 26.08 4.31 37.83 7.21 39.53a23.28 23.28 0 01-9.61-1.78c-8.5-3.83-11.94-10.54-13.09-17a29.72 29.72 0 016-23.31 68.38 68.38 0 0129.4-21.93c3.41-1.32 6.84-2.72 9.81-4.06z"
+      opacity=".1" />
+    <path
+      d="M427.5 246.5s-21-7.46-35-3.73c0 0-9 7.73-16 14.73-5.7 5.7-20 64 28 57 0 0-22.16-11.42-7.6-39.75a61.62 61.62 0 0128.9-27.46z"
+      fill="#5e52ad" />
+    <path
+      d="M585.5 372.5l-15 4s-.34-1-1-2.74c3.49-.92 8-3 8-7.26 0 0 11.45-10.69 16.35-17.39 3.43 2.86 6.76 4.61 9.65 4.39 13-1-18 19-18 19z"
+      opacity=".1" />
+    <path
+      d="M578.5 367.5s15-14 18-20c0 0 29 17 57 2 0 0 26-2 4 21s-81 32-81 32-16 0-10-27c0 0 12-1 12-8z"
+      fill="#ffd97b" />
+    <path
+      fill="#dfe5ee"
+      d="M667.76 717.38v-13.63l279.29-78.33 49.95-5.68v12.49l-278.15 99.9-51.09-14.75z" />
+    <path
+      opacity=".05"
+      d="M667.76 717.38v-13.63l279.29-78.33 49.95-5.68v12.49l-278.15 99.9-51.09-14.75z" />
+    <path
+      fill="#dfe5ee"
+      d="M667.76 703.75l279.29-91.96 48.82 7.95-277.02 98.77-51.09-14.76z" />
+    <path
+      fill="#dfe5ee"
+      d="M710.9 495.99h18.17v211.17H710.9zM928.88 447.17h18.17v185.06h-18.17z" />
+    <path
+      fill="#dfe5ee"
+      d="M992.46 389.27v56.77L765.67 496.7l-26.83 6-66.54 14.86-19.3-5.68v-65.84l102.9-19.62 25.62-4.88 187.1-35.67 23.84 3.4z" />
+    <path
+      opacity=".05"
+      d="M992.46 389.27v56.77L765.67 496.7l-26.83 6-66.54 14.86-19.3-5.68v-65.84l102.9-19.62 25.62-4.88 187.1-35.67 23.84 3.4z" />
+    <path
+      opacity=".05"
+      d="M729.07 495.99v11.16l-18.17 4.06v-15.22h18.17zM947.05 447.17v11.29l-18.17 4.05v-15.34h18.17z" />
+    <path
+      fill="#dfe5ee"
+      d="M992.46 389.27v56.77l-92.08 20.57-26.78 5.98-107.93 24.11-26.83 6-66.54 14.86 1.14-64.71 92.47-18.43 25.87-5.15h.01L897.5 408.2l25.82-5.15 69.14-13.78z" />
+    <path
+      fill="#4299e1"
+      d="M791.79 429.27l-26.12 67.43-26.83 6 27.07-68.28-10.01-8 25.62-4.88 10.26 7.73h.01zM924.62 404.03l-24.24 62.58-26.78 5.98 25.14-63.41-1.24-.98-8.76-7.02 25.61-4.88 8.97 6.75 1.29.98h.01z" />
+    <path
+      opacity=".05"
+      d="M714.88 703.47l18.16-4.26v4.26l-18.16 4.26v-4.26zM931.72 628.54l18.16-4.26v4.26l-18.16 4.25v-4.25z" /></svg>
+  <p class="mb-16 text-lg text-gray-500">
+    <span class="font-bold">{$_('no-tracks-added-yet')}</span><br />
+    <span>{$_('add-your-first-track')}</span>
+  </p>
+</div>
+
+<AddTrackModal bind:modal_open />
--- a/src/components/TracksOverview.svelte
+++ b/src/components/TracksOverview.svelte
@@ -0,0 +1,25 @@
+<script>
+  import { _ } from "svelte-i18n";
+  import AddTrackModal from "./AddTrackModal.svelte";
+  let modal_open = false;
+  import Tracks from "./Tracks.svelte";
+</script>
+
+<section class="container p-5">
+  <span class="mb-1 text-3xl font-extrabold leading-tight">
+    Tracks
+    <button
+      on:click={() => {
+        modal_open = true;
+      }}
+      type="button"
+      class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">
+      Create Track
+    </button>
+  </span>
+  <p class="mb-8 text-lg text-gray-500">
+    configure the tracks & minimum lap times
+  </p>
+  <Tracks />
+</section>
+<AddTrackModal bind:modal_open />
--- a/src/components/Transition.svelte
+++ b/src/components/Transition.svelte
@@ -0,0 +1,11 @@
+<!-- Transition.svelte -->
+<script>
+  import { router } from "tinro";
+  import { fade } from "svelte/transition";
+</script>
+
+{#key $router.path}
+  <div in:fade={{ duration: 75 }}>
+    <slot />
+  </div>
+{/key}
--- a/src/components/UserDetail.svelte
+++ b/src/components/UserDetail.svelte
@@ -0,0 +1,277 @@
+<script>
+  import { _ } from "svelte-i18n";
+  import lodashIsEqual from "lodash.isequal";
+  import store from "../store";
+  import { UserService } from "@odit/lfk-client-js";
+  import "gridjs/dist/theme/mermaid.css";
+  import PromiseError from "./PromiseError.svelte";
+  export let params;
+  const user_promise = UserService.userControllerGetOne(params.userid);
+  let data_loaded = false;
+  $: delete_triggered = false;
+  $: original_data = {};
+  $: editable_userdata = undefined;
+  user_promise.then((data) => {
+    data_loaded = true;
+    original_data = Object.assign(original_data, data);
+    editable_userdata = data;
+  });
+  $: changes_performed = !lodashIsEqual(original_data, editable_userdata);
+  function submit() {
+    if (data_loaded === true && changes_performed === true) {
+      console.log("ok, submitting...");
+      console.log(editable_userdata);
+      UserService.userControllerPut(original_data.id, editable_userdata)
+        .then((resp) => {
+          console.log(resp);
+          Object.assign(original_data, editable_userdata);
+          original_data = editable_userdata;
+          Object.assign(original_data, editable_userdata);
+        })
+        .catch((err) => {
+          console.log(err);
+        });
+    } else {
+      console.log("no changes performed");
+    }
+  }
+  function deleteUser() {
+    UserService.userControllerRemove(original_data.id, true)
+      .then((resp) => {
+        console.log(resp);
+        location.replace("./");
+      })
+      .catch((err) => {
+        console.log(err);
+      });
+  }
+</script>
+
+{#await user_promise}
+  <!--  -->
+{:then user}
+  <section class="container p-5 select-none">
+    <div class="flex flex-row mb-4">
+      <div class="w-full">
+        <nav class="w-full flex">
+          <ol class="list-none flex flex-row items-center justify-start">
+            <li class="flex items-center">
+              <svg
+                class="flex-shrink-0 w-5 h-5 mr-2"
+                fill="currentColor"
+                width="24"
+                height="24"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 640 512"><path
+                  fill="currentColor"
+                  d="M610.5 341.3c2.6-14.1 2.6-28.5 0-42.6l25.8-14.9c3-1.7 4.3-5.2 3.3-8.5-6.7-21.6-18.2-41.2-33.2-57.4-2.3-2.5-6-3.1-9-1.4l-25.8 14.9c-10.9-9.3-23.4-16.5-36.9-21.3v-29.8c0-3.4-2.4-6.4-5.7-7.1-22.3-5-45-4.8-66.2 0-3.3.7-5.7 3.7-5.7 7.1v29.8c-13.5 4.8-26 12-36.9 21.3l-25.8-14.9c-2.9-1.7-6.7-1.1-9 1.4-15 16.2-26.5 35.8-33.2 57.4-1 3.3.4 6.8 3.3 8.5l25.8 14.9c-2.6 14.1-2.6 28.5 0 42.6l-25.8 14.9c-3 1.7-4.3 5.2-3.3 8.5 6.7 21.6 18.2 41.1 33.2 57.4 2.3 2.5 6 3.1 9 1.4l25.8-14.9c10.9 9.3 23.4 16.5 36.9 21.3v29.8c0 3.4 2.4 6.4 5.7 7.1 22.3 5 45 4.8 66.2 0 3.3-.7 5.7-3.7 5.7-7.1v-29.8c13.5-4.8 26-12 36.9-21.3l25.8 14.9c2.9 1.7 6.7 1.1 9-1.4 15-16.2 26.5-35.8 33.2-57.4 1-3.3-.4-6.8-3.3-8.5l-25.8-14.9zM496 368.5c-26.8 0-48.5-21.8-48.5-48.5s21.8-48.5 48.5-48.5 48.5 21.8 48.5 48.5-21.7 48.5-48.5 48.5zM96 224c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm224 32c1.9 0 3.7-.5 5.6-.6 8.3-21.7 20.5-42.1 36.3-59.2 7.4-8 17.9-12.6 28.9-12.6 6.9 0 13.7 1.8 19.6 5.3l7.9 4.6c.8-.5 1.6-.9 2.4-1.4 7-14.6 11.2-30.8 11.2-48 0-61.9-50.1-112-112-112S208 82.1 208 144c0 61.9 50.1 112 112 112zm105.2 194.5c-2.3-1.2-4.6-2.6-6.8-3.9-8.2 4.8-15.3 9.8-27.5 9.8-10.9 0-21.4-4.6-28.9-12.6-18.3-19.8-32.3-43.9-40.2-69.6-10.7-34.5 24.9-49.7 25.8-50.3-.1-2.6-.1-5.2 0-7.8l-7.9-4.6c-3.8-2.2-7-5-9.8-8.1-3.3.2-6.5.6-9.8.6-24.6 0-47.6-6-68.5-16h-8.3C179.6 288 128 339.6 128 403.2V432c0 26.5 21.5 48 48 48h255.4c-3.7-6-6.2-12.8-6.2-20.3v-9.2zM173.1 274.6C161.5 263.1 145.6 256 128 256H64c-35.3 0-64 28.7-64 64v32c0 17.7 14.3 32 32 32h65.9c6.3-47.4 34.9-87.3 75.2-109.4z" /></svg>
+            </li>
+            <li class="flex items-center">
+              <a class="mr-2" href="./">{$_('users')}</a><svg
+                stroke="currentColor"
+                fill="none"
+                stroke-width="2"
+                viewBox="0 0 24 24"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                class="h-3 w-3 mr-2 stroke-current"
+                height="1em"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"><line
+                  x1="5"
+                  y1="12"
+                  x2="19"
+                  y2="12" />
+                <polyline points="12 5 19 12 12 19" /></svg>
+            </li>
+            <li class="flex items-center">
+              <span class="mr-2">{original_data.firstname}
+                {original_data.middlename || ''}
+                {original_data.lastname}</span>
+            </li>
+          </ol>
+        </nav>
+      </div>
+    </div>
+    <div class="mb-8 text-3xl font-extrabold leading-tight">
+      {original_data.firstname}
+      {original_data.middlename || ''}
+      {original_data.lastname}
+      <span data-id="user_actions_${editable_userdata.id}">
+        {#if store.state.jwtinfo.userdetails.permissions.includes('USER:DELETE')}
+          {#if delete_triggered}
+            <button
+              on:click={deleteUser}
+              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm">{$_('confirm-delete')}</button>
+            <button
+              on:click={() => {
+                delete_triggered = !delete_triggered;
+              }}
+              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-400 text-base font-medium text-white sm:w-auto sm:text-sm">{$_('cancel')}</button>
+          {/if}
+          {#if !delete_triggered}
+            <button
+              on:click={() => {
+                delete_triggered = true;
+              }}
+              type="button"
+              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm">{$_('delete-user')}</button>
+          {/if}
+        {/if}
+        {#if !delete_triggered}
+          <button
+            disabled={!changes_performed}
+            class:opacity-50={!changes_performed}
+            type="button"
+            on:click={submit}
+            class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">{$_('save-changes')}</button>
+        {/if}
+      </span>
+    </div>
+
+    <!--  -->
+    <div class="mt-2 flex items-center">
+      <img
+        alt={$_('profile-picture')}
+        class="inline-block h-20 w-20 rounded-full overflow-hidden bg-gray-100"
+        src={editable_userdata.profilePic} />
+      <!-- <span
+        class="inline-block h-12 w-12 rounded-full overflow-hidden bg-gray-100"><svg
+          class="h-full w-full text-gray-300"
+          fill="currentColor"
+          viewBox="0 0 24 24"><path
+            d="M24 20.993V24H0v-2.996A14.977 14.977 0 0112.004 15c4.904 0 9.26 2.354 11.996 5.993zM16.002 8.999a4 4 0 11-8 0 4 4 0 018 0z" /></svg></span> -->
+      <button
+        type="button"
+        class="ml-5 bg-white py-2 px-3 border border-gray-300 rounded-md shadow-sm text-sm leading-4 font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">Change</button>
+    </div>
+    <!--  -->
+    <div class="mt-3 text-sm w-full">
+      <input
+        id="enabled"
+        on:change={() => {
+          editable_userdata.enabled = !editable_userdata.enabled;
+          // TODO: this reactive set does not work?
+        }}
+        name="enabled"
+        type="checkbox"
+        checked={editable_userdata.enabled}
+        class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded" />
+      <label
+        for="enabled"
+        class="ml-1 font-medium text-gray-700">Active?</label>
+      <p class="text-gray-500">set the user active/ inactive</p>
+    </div>
+    <div class="text-sm w-full">
+      <label
+        for="firstname"
+        class="font-medium text-gray-700">{$_('first-name')}</label>
+      <input
+        autocomplete="off"
+        placeholder={$_('first-name')}
+        type="text"
+        bind:value={editable_userdata.firstname}
+        name="firstname"
+        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 dark:bg-gray-900 dark:text-gray-100 rounded-md p-2" />
+    </div>
+    <div class="text-sm w-full">
+      <label
+        for="middlename"
+        class="font-medium text-gray-700">{$_('middle-name')}</label>
+      <input
+        autocomplete="off"
+        placeholder={$_('middle-name')}
+        type="text"
+        bind:value={editable_userdata.middlename}
+        name="middlename"
+        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 dark:bg-gray-900 dark:text-gray-100 rounded-md p-2" />
+    </div>
+    <div class="text-sm w-full">
+      <label
+        for="lastname"
+        class="font-medium text-gray-700">{$_('last-name')}</label>
+      <input
+        autocomplete="off"
+        placeholder={$_('last-name')}
+        type="text"
+        bind:value={editable_userdata.lastname}
+        name="lastname"
+        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 dark:bg-gray-900 dark:text-gray-100 rounded-md p-2" />
+    </div>
+    <div class="text-sm w-full">
+      <label
+        for="email"
+        class="font-medium text-gray-700">{$_('e-mail-adress')}</label>
+      <input
+        autocomplete="off"
+        placeholder={$_('e-mail-adress')}
+        type="email"
+        bind:value={editable_userdata.email}
+        name="email"
+        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 dark:bg-gray-900 dark:text-gray-100 rounded-md p-2" />
+    </div>
+    <div class="text-sm w-full">
+      <span class="font-medium">{$_('groups')}</span>
+      <select
+        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 dark:bg-gray-900 dark:text-gray-100 rounded-md p-2"
+        multiple>
+        <option>Admins</option>
+        <option>Finanzen</option>
+        <option>...</option>
+      </select>
+    </div>
+    <div class="text-sm w-full">
+      <span class="font-medium">Permissions</span>
+      <div
+        class="border-4 border-dashed rounded h-96 mb-4 p-5 text-lg text-center">
+        <!--  -->
+        <div class="flex flex-wrap -mx-1 overflow-hidden">
+          <div class="my-1 px-1 w-full overflow-hidden sm:w-1/2">
+            <button
+              type="button"
+              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-gray-600 text-base font-medium text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 sm:ml-3 sm:w-auto sm:text-sm">&gt;</button>
+          </div>
+
+          <div class="my-1 px-1 w-full overflow-hidden sm:w-1/2">
+            <button
+              type="button"
+              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-gray-600 text-base font-medium text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 sm:ml-3 sm:w-auto sm:text-sm">&lt;</button>
+          </div>
+        </div>
+        <!--  -->
+        <div class="flex flex-wrap -mx-1 overflow-hidden">
+          <div class="my-1 px-1 w-full overflow-hidden sm:w-1/2">
+            <div
+              class="border-4 border-dashed rounded mb-4 p-5 text-lg text-center">
+              <p
+                class="block w-full mt-1 text-sm dark:border-gray-600 dark:bg-gray-700 bg-gray-200 p-2 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:text-gray-300 dark:focus:shadow-outline-gray form-input">
+                DEMO_PERMISSION
+              </p>
+              <p
+                class="block w-full mt-1 text-sm dark:border-gray-600 dark:bg-gray-700 bg-gray-200 p-2 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:text-gray-300 dark:focus:shadow-outline-gray form-input">
+                DEMO_PERMISSION
+              </p>
+            </div>
+          </div>
+
+          <div class="my-1 px-1 w-full overflow-hidden sm:w-1/2">
+            <div
+              class="border-4 border-dashed rounded mb-4 p-5 text-lg text-center">
+              <p
+                class="block w-full mt-1 text-sm dark:border-gray-600 dark:bg-gray-700 bg-gray-200 p-2 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:text-gray-300 dark:focus:shadow-outline-gray form-input">
+                DEMO_PERMISSION
+              </p>
+              <p
+                class="block w-full mt-1 text-sm dark:border-gray-600 dark:bg-gray-700 bg-gray-200 p-2 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:text-gray-300 dark:focus:shadow-outline-gray form-input">
+                DEMO_PERMISSION
+              </p>
+            </div>
+          </div>
+        </div>
+        TODO: permission picker 🔒
+      </div>
+    </div>
+  </section>
+{:catch error}
+  <PromiseError {error} />
+{/await}
--- a/src/components/Users.svelte
+++ b/src/components/Users.svelte
@@ -0,0 +1,30 @@
+<script>
+  import { _ } from "svelte-i18n";
+  import store from "../store";
+  import AddUserModal from "./AddUserModal.svelte";
+  export let modal_open = false;
+  import UsersOverview from "./UsersOverview.svelte";
+  console.log(store.state.jwtinfo.userdetails.permissions);
+</script>
+
+<section class="container p-5">
+  <span class="mb-1 text-3xl font-extrabold leading-tight">
+    {$_('users')}
+    {#if store.state.jwtinfo.userdetails.permissions.includes('USER:CREATE')}
+      <button
+        on:click={() => {
+          modal_open = true;
+        }}
+        type="button"
+        class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">
+        {$_('create-user')}
+      </button>
+    {/if}
+  </span>
+  <p class="mb-8 text-lg text-gray-500">{$_('manage-admin-users')}</p>
+  <UsersOverview />
+</section>
+
+{#if store.state.jwtinfo.userdetails.permissions.includes('USER:CREATE')}
+  <AddUserModal bind:modal_open />
+{/if}
--- a/src/components/UsersEmptyState.svelte
+++ b/src/components/UsersEmptyState.svelte
@@ -0,0 +1,14 @@
+<script>
+  import { _ } from "svelte-i18n";
+  import AddUserModal from "./AddUserModal.svelte";
+  let modal_open = false;
+</script>
+
+<div class="text-center items-center justify-center">
+  <p class="mb-16 text-lg text-gray-500">
+    <span class="font-bold">There are no users added yet.</span><br />
+    <span>Add your first user</span>
+  </p>
+</div>
+
+<AddUserModal bind:modal_open />
--- a/src/components/UsersOverview.svelte
+++ b/src/components/UsersOverview.svelte
@@ -0,0 +1,186 @@
+<script>
+  import { _ } from "svelte-i18n";
+  import Toastify from "toastify-js";
+  import { UserService } from "@odit/lfk-client-js";
+  const users_promise = UserService.userControllerGetAll();
+  import "gridjs/dist/theme/mermaid.css";
+  import { users as usersstore } from "../store.js";
+  import store from "../store";
+  import UsersEmptyState from "./UsersEmptyState.svelte";
+  $: searchvalue = "";
+  $: active_deletes = [];
+  $: userscache = [];
+  $: advanced_search = false;
+  usersstore.subscribe((val) => {
+    userscache = val;
+  });
+  users_promise.then((data) => {
+    console.log(data);
+    usersstore.set(data);
+  });
+</script>
+
+{#if store.state.jwtinfo.userdetails.permissions.includes('USER:GET')}
+  {#await users_promise}
+    <div
+      class="bg-teal-lightest border-t-4 border-teal rounded-b text-teal-darkest px-4 py-3 shadow-md my-2"
+      role="alert">
+      <p class="font-bold">users are being loaded...</p>
+      <p class="text-sm">{$_('this-might-take-a-moment')}</p>
+    </div>
+  {:then users}
+    {#if userscache.length === 0}
+      <UsersEmptyState />
+    {:else}
+      {#if advanced_search}
+        advanced search
+      {:else}
+        <input
+          type="search"
+          bind:value={searchvalue}
+          placeholder={$_('datatable.search')}
+          aria-label={$_('datatable.search')}
+          class="gridjs-input gridjs-search-input mb-4" />
+      {/if}
+      <button
+        on:click={() => {
+          advanced_search = !advanced_search;
+        }}
+        type="button"
+        class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-gray-600 text-base font-medium text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 sm:ml-3 sm:w-auto sm:text-sm">
+        {#if advanced_search}
+          toggle simple search
+        {:else}toggle advanced search{/if}
+      </button>
+      <div
+        class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll">
+        <table class="divide-y divide-gray-200 w-full">
+          <thead class="bg-gray-50">
+            <tr>
+              <th
+                scope="col"
+                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                Name
+              </th>
+              <th
+                scope="col"
+                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                Status
+              </th>
+              <th
+                scope="col"
+                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                Groups
+              </th>
+              <th scope="col" class="relative px-6 py-3">
+                <span class="sr-only">Action</span>
+              </th>
+            </tr>
+          </thead>
+          <tbody class="divide-y divide-gray-200">
+            {#each users as u}
+              {#if Object.values(u)
+                .toString()
+                .toLowerCase()
+                .includes(searchvalue)}
+                <tr>
+                  <td class="px-6 py-4 whitespace-nowrap">
+                    <div class="flex items-center">
+                      {#if u.profilePic}
+                        <div class="flex-shrink-0 h-10 w-10">
+                          <img
+                            class="h-10 w-10 rounded-full"
+                            src={u.profilePic}
+                            alt="" />
+                        </div>
+                      {/if}
+                      <div class="ml-4">
+                        <div
+                          class="text-sm font-medium text-gray-900 dark:text-gray-100">
+                          {u.firstname}
+                          {u.middlename || ''}
+                          {u.lastname}
+                        </div>
+                        <div class="text-sm text-gray-500">
+                          {u.email || u.username}
+                        </div>
+                      </div>
+                    </div>
+                  </td>
+                  <td class="px-6 py-4 whitespace-nowrap">
+                    {#if u.enabled}
+                      <span
+                        class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Active</span>
+                    {:else}
+                      <span
+                        class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">Inactive</span>
+                    {/if}
+                  </td>
+                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                    {#each u.groups as g}
+                      <a
+                        href="../groups/{g.id}"
+                        class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">{g.name}</a>
+                    {/each}
+                  </td>
+                  {#if active_deletes[u.id] === true}
+                    <td
+                      class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+                      <button
+                        on:click={() => {
+                          active_deletes[u.id] = false;
+                        }}
+                        tabindex="0"
+                        class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer">Cancel
+                        Delete</button>
+                      <button
+                        on:click={() => {
+                          UserService.userControllerRemove(u.id, true)
+                            .then((resp) => {
+                              console.log(resp);
+                              // user deleted
+                              users_promise.then((data) => {
+                                console.log(data);
+                                usersstore.set(data);
+                              });
+                            })
+                            .catch((err) => {
+                              // error deleting user
+                            });
+                        }}
+                        tabindex="0"
+                        class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">Confirm
+                        Delete</button>
+                    </td>
+                  {:else}
+                    <td
+                      class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+                      <a
+                        href="./{u.id}"
+                        class="text-indigo-600 hover:text-indigo-900">Edit</a>
+                      {#if store.state.jwtinfo.userdetails.permissions.includes('USER:DELETE')}
+                        <button
+                          on:click={() => {
+                            active_deletes[u.id] = true;
+                          }}
+                          tabindex="0"
+                          class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">Delete</button>
+                      {/if}
+                    </td>
+                  {/if}
+                </tr>
+              {/if}
+            {/each}
+          </tbody>
+        </table>
+      </div>
+    {/if}
+  {:catch error}
+    <div class="text-white px-6 py-4 border-0 rounded relative mb-4 bg-red-500">
+      <span class="inline-block align-middle mr-8">
+        <b class="capitalize">{$_('general_promise_error')}</b>
+        {error}
+      </span>
+    </div>
+  {/await}
+{/if}
--- a/src/components/datatable_i18n.js
+++ b/src/components/datatable_i18n.js
@@ -0,0 +1,24 @@
+export function getlang(langkeys) {
+	return {
+		search: {
+			placeholder: langkeys.search
+		},
+		sort: {
+			sortAsc: langkeys.sort_column_ascending,
+			sortDesc: langkeys.sort_column_descending
+		},
+		pagination: {
+			previous: langkeys.previous,
+			next: langkeys.next,
+			navigate: (page, pages) => `${langkeys.page} ${page} ${langkeys.of} ${pages}`,
+			page: (page) => `${langkeys.page} ${page}`,
+			showing: langkeys.showing,
+			of: langkeys.of,
+			to: langkeys.to,
+			results: langkeys.records
+		},
+		loading: langkeys.loading,
+		noRecordsFound: langkeys.no_matching_records_found,
+		error: langkeys.an_error_happened_while_fetching_the_data
+	};
+}
--- a/src/components/outsideclick.js
+++ b/src/components/outsideclick.js
@@ -0,0 +1,10 @@
+/** Dispatch event on click outside of node */
+export function clickOutside(node) {
+	const handleClick = (event) => {
+		if (event.target.getAttribute('data-id') === 'modal_backdrop') {
+			node.dispatchEvent(new CustomEvent('click_outside', node));
+		}
+	};
+	document.removeEventListener('click', handleClick, true);
+	document.addEventListener('click', handleClick, true);
+}
--- a/src/index.js
+++ b/src/index.js
@@ -5,3 +5,10 @@ const app = new App({
 });

 export default app;
+// HMR
+if (import.meta.hot) {
+	import.meta.hot.accept();
+	import.meta.hot.dispose(() => {
+		app.$destroy();
+	});
+}
--- a/src/locales/de.json
+++ b/src/locales/de.json
@@ -1,8 +1,47 @@
 {
-  "forgot_password?": "Passwort vergessen?",
-  "log_in": "Anmelden",
-  "log_in_to_your_account": "Bitte melde dich an",
-  "login_is_checked": "Login wird überprüft",
-  "welcome_wavinghand": "Willkommen 👋",
-  "error_on_login": "😢Fehler beim Login"
-}
+    "404message": "Die gesuchte Seite wurde leider nicht gefunden.",
+    "404title": "Fehler 404",
+    "about": "Über",
+    "application_name": "Lauf für Kaya! \n- Admin",
+    "by": "von",
+    "cannot-reset-your-password-directly": "Schade. \nWir können das Passwort leider nicht direkt zurücksetzen.\nBitte sende uns eine Mail in der du deine Identität bestätigst.",
+    "credits": "",
+    "dashboard-greeting": "Moin",
+    "datatable": {
+        "search": "🔍 Suche ...",
+        "an_error_happened_while_fetching_the_data": "Beim Abrufen der Daten ist ein Fehler aufgetreten",
+        "loading": "Wird geladen...",
+        "next": "Nächste",
+        "of": "von",
+        "previous": "Vorherige",
+        "to": "bis",
+        "showing": "Zeige"
+    },
+    "dont-have-your-email-connected": "Deine E-Mail ist nicht verknüpft?",
+    "dont-panic-were-resetting-it": "Keine Panik, wir setzen es zurück ✌",
+    "e-mail-adress": "E-Mail-Adresse",
+    "email_address_or_username": "E-Mail-Addresse/ Benutzername",
+    "error_on_login": "😢Fehler beim Login",
+    "forgot_password?": "Passwort vergessen?",
+    "general-stats": "Allgemeine Statistiken",
+    "goback": "Zur Startseite",
+    "hallo": "hallo",
+    "invalid-mail-reset": "Das ist keine gültige E-Mail",
+    "lfk-is-os": "Das \"Lauf für Kaya!\" Frontend ist (wie alle anderen Projekte für den \"LfK!\" auch) ein OpenSource Projekt.",
+    "log_in": "Anmelden",
+    "log_in_to_your_account": "Bitte melde dich an",
+    "login_is_checked": "Login wird überprüft",
+    "oss_credit_description": "Wir verwenden eine Menge Open Source-Software bei diesen Projekten und möchten uns bei den folgenden Projekten und Mitwirkenden bedanken, die dazu beitragen, Open Source großartig zu machen!",
+    "password": "Passwort",
+    "register": "Registrieren",
+    "reset-my-password": "Passwort zurücksetzen",
+    "runners": "Läufer",
+    "send-a-mail-to-lfk-odit-services": "Sende eine Mail an lfk@odit.services",
+    "settings": "Einstellungen",
+    "signout": "Abmelden",
+    "total-distance": "gelaufene Strecke",
+    "total-donations": "Spendensumme",
+    "total-scans": "gesamte Scans",
+    "welcome_wavinghand": "Willkommen 👋",
+    "your_profile": "Dein Profil"
+}
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -1,11 +1,124 @@
 {
-  "forgot_password?": "Forgot your password?",
-  "register": "Register",
-  "log_in": "Log in",
-  "password": "Password",
-  "email_address": "Email address",
-  "log_in_to_your_account": "Log in to your account",
-  "welcome_wavinghand": "Welcome 👋",
-  "login_is_checked": "Login is being checked...",
-  "error_on_login": "Error on login"
-}
+    "404message": "Sorry, the page you are looking for could not be found.",
+    "404title": "Error 404",
+    "about": "About",
+    "action": "Action",
+    "add-your-first-track": "Add your first track",
+    "application_name": "Lauf für Kaya! - Admin",
+    "author": "Author",
+    "browse": "Browse",
+    "by": "by",
+    "cancel": "Cancel",
+    "cannot-reset-your-password-directly": "Bummer. We unfortunately cannot reset your password directly. Please send us a mail and confirm your identity",
+    "changelog": "Changelog",
+    "close": "Close",
+    "confirm-delete": "Confirm Delete",
+    "count_organizations": "# Organizations",
+    "count_teams": "# Teams",
+    "create": "Create",
+    "create-a-new-track": "Create a new Track",
+    "create-user": "Create User",
+    "credits": "Credits",
+    "dashboard-greeting": "hello there",
+    "dashboard-title": "Dashboard",
+    "datatable": {
+        "search": "🔍 Search...",
+        "sort_column_ascending": "Sort column ascending",
+        "sort_column_descending": "Sort column descending",
+        "previous": "Previous",
+        "next": "Next",
+        "page": "Page",
+        "showing": "Showing",
+        "records": "Records",
+        "of": "of",
+        "to": "to",
+        "loading": "Loading...",
+        "no_matching_records_found": "No matching records found",
+        "an_error_happened_while_fetching_the_data": "An error happened while fetching the data"
+    },
+    "delete-user": "Delete User",
+    "dependency_name": "Name",
+    "dont-have-your-email-connected": "Don't have your email connected?",
+    "dont-panic-were-resetting-it": "Don't panic, we're resetting it ✌",
+    "drag-and-drop-your-files-or": "Drag & Drop your files or",
+    "e-mail-adress": "E-Mail Adress",
+    "email_address_or_username": "Email / username",
+    "error_on_login": "Error on login",
+    "faq": "FAQ",
+    "filepond__abort": "Abort",
+    "filepond__cancel": "Cancel",
+    "filepond__error-during-load": "Error during load",
+    "filepond__error-during-remove": "Error during remove",
+    "filepond__error-during-revert": "Error during revert",
+    "filepond__error-during-upload": "Error during upload",
+    "filepond__field-contains-invalid-files": "Field contains invalid files",
+    "filepond__loading": "Loading",
+    "filepond__remove": "Remove",
+    "filepond__retry": "Retry",
+    "filepond__size-not-available": "Size not available",
+    "filepond__tap-to-cancel": "tap to cancel",
+    "filepond__tap-to-retry": "tap to retry",
+    "filepond__tap-to-undo": "tap to undo",
+    "filepond__undo": "Undo",
+    "filepond__upload": "Upload",
+    "filepond__upload-cancelled": "Upload cancelled",
+    "filepond__upload-complete": "Upload complete",
+    "filepond__uploading": "Uploading",
+    "filepond__waiting-for-size": "Waiting for size",
+    "first-name": "First name",
+    "first-name-is-required": "First Name is required",
+    "forgot_password?": "Forgot your password?",
+    "general-stats": "General Stats",
+    "general_promise_error": "😢 Error",
+    "goback": "Go Home",
+    "groups": "Groups",
+    "hallo": "hello",
+    "installed-version": "Installed version",
+    "invalid-mail-reset": "the provided email is invalid",
+    "last-name": "Last name",
+    "last-name-is-required": "Last Name is required",
+    "lfk-is-os": "The \"Lauf für Kaya!\" Frontend is (like all other projects for the \"LfK!\" Also) an open source project.",
+    "license": "License",
+    "licenses-are-being-loaded": "Licenses are being loaded...",
+    "log_in": "Log in",
+    "log_in_to_your_account": "Log in to your account",
+    "login_is_checked": "Login is being checked...",
+    "logout": "Logout",
+    "mail-validation-in-progress": "mail validation in progress...",
+    "manage-admin-users": "manage admin users",
+    "middle-name": "Middle name",
+    "minimum-lap-time-in-s": "minimum lap time in s",
+    "no-license-text-could-be-found": "No license text could be found 😢",
+    "no-tracks-added-yet": "there are no tracks added yet.",
+    "orgs": "Orgs",
+    "oss_credit_description": "We use a lot of open source software on these projects, and would like to thank the following projects and contributors who help make open source great!",
+    "password": "Password",
+    "password-is-required": "Password is required",
+    "please-provide-the-required-information-to-add-a-new-track": "Please provide the required information to add a new track.",
+    "profile-picture": "Profile Picture",
+    "read-license": "Read License",
+    "register": "Register",
+    "repo_link": "Link",
+    "reset-my-password": "Reset my password",
+    "runners": "Runners",
+    "save-changes": "Save Changes",
+    "send-a-mail-to-lfk-odit-services": "send a mail to lfk@odit.services",
+    "settings": "Settings",
+    "signout": "Sign out",
+    "stats-are-being-loaded": "stats are being loaded...",
+    "teams": "Teams",
+    "this-might-take-a-moment": "This might take a moment 👀",
+    "total-distance": "total distance",
+    "total-donations": "total donations",
+    "total-scans": "total scans",
+    "track-added": "Track added",
+    "track-data-is-being-loaded": "Track data is being loaded",
+    "track-is-being-added": "Track is being added...",
+    "track-length-in-m": "Track Length in m",
+    "track-name": "Track name",
+    "tracks": "Tracks",
+    "users": "Users",
+    "valid-email-is-required": "valid email is required",
+    "welcome_wavinghand": "Welcome 👋",
+    "your_profile": "Your Profile"
+}
--- a/src/store.js
+++ b/src/store.js
@@ -1,33 +1,59 @@
 import { writable } from 'svelte/store';
+import { OpenAPI, AuthService } from '@odit/lfk-client-js';
+import localForage from 'localforage';

+export let users = writable([]);
+export let tracks = writable([]);
 const store = () => {
 	const state = {
+		auth: undefined,
 		access_token: undefined,
-		isLoggedIn: false
+		jwtinfo: undefined,
+		isLoggedIn: false,
+		refreshInterval: undefined
 	};

 	const { subscribe, set, update } = writable(state);

 	const methods = {
 		init() {
-			console.log('*: playerStore -> init()');
 			update((state) => {
 				state.isLoggedIn = false;
 				return state;
 			});
 		},
-
-		login(access_token) {
+		refreshAuth() {
+			console.log('refreshing auth');
+			AuthService.authControllerRefresh({ token: state.auth.refresh_token }).then((auth) => {
+				console.log('got new auth');
+				OpenAPI.TOKEN = auth.access_token;
+				const jwtinfo = JSON.parse(atob(auth.access_token.split('.')[1]));
+				state.jwtinfo = jwtinfo;
+				localForage.setItem('logindata', auth);
+			});
+		},
+		login(auth, jwtinfo) {
 			update((state) => {
-				state.access_token = access_token;
+				state.auth = auth;
+				state.access_token = auth.access_token;
+				state.jwtinfo = jwtinfo;
 				state.isLoggedIn = true;
-				console.log('login performed');
+				//
+				state.refreshInterval = setInterval(() => {
+					this.refreshAuth();
+					// 2min
+				}, 2 * 60000);
+				//
 				return state;
 			});
 		},
 		logout() {
 			update((state) => {
 				state.isLoggedIn = false;
+				//
+				clearInterval(state.refreshInterval);
+				state.refreshInterval = undefined;
+				//
 				return state;
 			});
 		}
@@ -37,8 +63,8 @@ const store = () => {
 		subscribe,
 		set,
 		update,
+		state,
 		...methods
 	};
 };
-
 export default store();
--- a/src/swmodule.js
+++ b/src/swmodule.js
@@ -0,0 +1,14 @@
+export const register = () => {
+	if ('serviceWorker' in navigator) {
+		window.addEventListener('load', () => {
+			navigator.serviceWorker.register('/sw.js').then(
+				(registration) => {
+					// console.log(`sw successful with scope: ${registration.scope}`);
+				},
+				(err) => {
+					// console.log(`sw failed: ${err}`);
+				}
+			);
+		});
+	}
+};
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -0,0 +1,11 @@
+const sveltePreprocess = require('svelte-preprocess');
+
+const preprocess = sveltePreprocess({
+	postcss: {
+		plugins: [ require('tailwindcss'), require('autoprefixer') ]
+	}
+});
+
+module.exports = {
+	preprocess
+};
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -0,0 +1,14 @@
+module.exports = {
+	purge: {
+		content: [ './src/**/*.svelte' ]
+	},
+	// darkMode: 'media',
+	variants: {},
+	plugins: [],
+	theme: {
+		container: {
+			center: true,
+			padding: '1.5rem'
+		}
+	}
+};
--- a/versionbuilder.js
+++ b/versionbuilder.js
@@ -0,0 +1,5 @@
+const fs = require('fs');
+const package = JSON.parse(fs.readFileSync(`./package.json`, { encoding: 'utf-8' }));
+const original = fs.readFileSync(`./public/index.html`, { encoding: 'utf-8' });
+let out = original.replace(/RELEASE_INFO-(\S)+-RELEASE_INFO/gi, 'RELEASE_INFO-' + package.version + '-RELEASE_INFO');
+fs.writeFileSync(`./public/index.html`, out);
--- a/workbox-config.js
+++ b/workbox-config.js
@@ -0,0 +1,6 @@
+module.exports = {
+	globDirectory: 'public',
+	globPatterns: [ '**/*.{js,ico,png,svg,html,webmanifest,txt}' ],
+	globIgnores: [ 'env.js', 'env.sample.js', 'licenses.json' ],
+	swDest: 'public/sw.js'
+};