<script lang="ts">
    import { RiInformationLine, RiMenu3Line, RiShieldLine } from "svelte-remixicon";

let  { children, title, left, right } = $props();
</script>

<!-- svelte-ignore a11y_click_events_have_key_events -->
<!-- svelte-ignore a11y_no_static_element_interactions -->
<div class="layout">
  <div class="layout-title">{title}</div>
  <div class="layout-left">{@render left()}</div>
  <div class="layout-content">{@render children()}</div>
  <div class="layout-right">{@render right()}</div>
 
  <div class="layout-licon" onclick={() => {}}><RiMenu3Line /></div>
  <div class="layout-ricon" onclick={() => {}}><RiInformationLine /></div>
</div>

<style>

.layout {
    display: grid;
    grid-template-columns: 300px auto 300px;
    grid-template-rows: 2em auto;
    grid-template-areas: 
       ". title ."
       "left center right";
    margin: 1em 2em;
}

.layout-left { grid-area: left; }
.layout-right { grid-area: right; }
.layout-content { grid-area: center; }
.layout-title { grid-area: title; text-align: center; font-size: 1.4em; }


@media (min-width: 800px) {
  .layout {
    grid-template-columns: 240px auto 240px;
  }

  .layout-licon, .layout-ricon { display: none; }
}

@media (min-width: 960px) {
  .layout {
    grid-template-columns: 270px auto 270px;
  }
}

@media (min-width: 1080px) {
  .layout {
    grid-template-columns: 300px auto 300px;
  }
}

@media (min-width: 1280px) {
  .layout {
    grid-template-columns: 330px auto 330px;
  }
}

@media (max-width: 799px) {
  .layout {
    grid-template-areas: 
      "licon title ricon"
      "center center center";

    grid-template-columns: 2em auto 2em;
  }

  .layout-left, .layout-right { display: none; }
}


</style>
