<template>
  <aside class="flex flex-col w-3xl h-screen bg-slate-50">
    <!--- Header --->
    <div class="relative bg-white border-b border-slate-200 shadow-outer z-10">
      <svg xmlns="http://www.w3.org/2000/svg" class="w-l py-[1.2rem] mx-auto" viewBox="0 0 128 42">
        <path class="fill-green-700" fill-rule="evenodd" d="M50.913 8.532c.856 0 1.612.139 2.267.416a6.167 6.167 0 0 1 1.739 1.096c.529.453.97.995 1.322 1.625h.605V4.753c0-.63-.025-1.26-.076-1.89a38.505 38.505 0 0 0-.113-1.851h1.02a14.33 14.33 0 0 1 1.02-.038h1.059a14.46 14.46 0 0 1 1.02-.038c.277 0 .517.063.718.189.227.126.403.328.53.605.125.277.188.655.188 1.133V24.14a88.685 88.685 0 0 0 .151 5.216h-1.058c-.352.025-.705.038-1.058.038h-1.02c-.353.025-.706.037-1.058.037-.303 0-.555-.088-.756-.264a1.66 1.66 0 0 1-.454-.643 3.288 3.288 0 0 1-.113-.869v-1.89h-.642a7.596 7.596 0 0 1-1.474 2.08 6.7 6.7 0 0 1-2.003 1.397 5.663 5.663 0 0 1-2.343.492 6.11 6.11 0 0 1-2.457-.492 5.72 5.72 0 0 1-1.965-1.511c-.529-.655-.945-1.436-1.247-2.343-.302-.932-.453-1.965-.453-3.099v-5.064c0-1.436.163-2.696.49-3.78.354-1.083.82-1.99 1.4-2.72.604-.73 1.31-1.272 2.115-1.625a6.319 6.319 0 0 1 2.646-.567Zm4.308 5.782c.58.272 1.123.656 1.625 1.15v5.948a7.456 7.456 0 0 1-1.172 1.405c-.579.554-1.184.957-1.813 1.21a5.245 5.245 0 0 1-1.966.377c-.327 0-.63-.038-.907-.113a1.938 1.938 0 0 1-.718-.454c-.176-.252-.315-.58-.415-.982-.101-.428-.151-.945-.151-1.55v-3.628c0-.856.113-1.574.34-2.154.226-.58.567-1.02 1.02-1.322.479-.303 1.045-.454 1.7-.454.832 0 1.65.19 2.457.567ZM5.14 9.024a1.628 1.628 0 0 0-.643-.114c-.756 0-1.512.013-2.267.038-.731 0-1.474.012-2.23.038a260.825 260.825 0 0 0 1.7 6.99 165.29 165.29 0 0 0 1.852 6.312 93.982 93.982 0 0 0 1.965 5.555c.202.454.391.794.567 1.02.177.227.378.378.605.454.252.076.542.113.87.113h2.72c.983 0 1.953-.012 2.91-.037a69.115 69.115 0 0 0 1.776-4.384 78.491 78.491 0 0 0 1.625-4.686c.504-1.613.983-3.25 1.436-4.913.479-1.663.92-3.363 1.323-5.102.05-.277.038-.516-.038-.718a.845.845 0 0 0-.378-.491c-.15-.126-.39-.19-.718-.19-.705 0-1.423.014-2.154.039-.73 0-1.461.012-2.192.038a108.042 108.042 0 0 1-.567 3.25 71.297 71.297 0 0 1-.68 3.174 83.81 83.81 0 0 1-.756 3.212 764.554 764.554 0 0 1-.869 3.288 2894.03 2894.03 0 0 0-.945 3.552h-.604a260.985 260.985 0 0 0-1.323-5.48c-.403-1.687-.794-3.337-1.171-4.95A407.498 407.498 0 0 1 5.82 9.968c-.025-.277-.101-.491-.227-.642a.906.906 0 0 0-.453-.303Zm32.9 6.424H24.475v3.702c0 .328.012.592.038.794.025.176.075.327.15.453a.72.72 0 0 0 .416.19c.177.025.391.037.643.037h13.265v-2.04c.025-.68.037-1.361.037-2.041 0-.277-.037-.492-.113-.643a.603.603 0 0 0-.264-.34c-.127-.075-.328-.113-.605-.113Zm38.33 9.032h4.307c.479 0 .87.063 1.172.189.302.1.516.252.642.453.151.177.227.39.227.643v1.21c0 .377-.013.767-.038 1.17 0 .378-.012.782-.038 1.21H67.677c-.504 0-.844-.114-1.02-.34-.176-.252-.265-.592-.265-1.02v-2.306c0-.378.013-.78.038-1.21h4.82l.017-.49c-.05-.404-.1-.82-.15-1.248a20.924 20.924 0 0 1-.114-1.322 25.93 25.93 0 0 1-.038-1.436v-6.349l-.605-.038a6.055 6.055 0 0 1-1.587.378c-.529.05-1.02.075-1.474.075a.716.716 0 0 1-.567-.264c-.15-.202-.226-.504-.226-.907v-1.965l.075-1.927h.87c.352-.026.718-.038 1.095-.038h1.21a22.68 22.68 0 0 1 1.322-.038H73.8c.202 0 .416.139.643.416.252.277.479.655.68 1.133.227.454.428.933.605 1.436.201.504.352.996.453 1.474.018.065.035.128.05.19h.366c.655-1.538 1.524-2.76 2.608-3.666 1.108-.907 2.393-1.361 3.854-1.361.53 0 .958.05 1.285.151.328.076.58.202.756.378.1.076.176.227.227.454.05.201.075.478.075.831 0 .831-.012 1.638-.038 2.419 0 .755-.012 1.524-.037 2.305h-.605a7.158 7.158 0 0 0-1.512-.454 7.379 7.379 0 0 0-1.587-.15c-.756 0-1.499.138-2.23.415a6.078 6.078 0 0 0-1.965 1.171 6.9 6.9 0 0 0-1.058 1.182v7.246Zm29.046-8.087v6.915c0 .202.012.39.038.567.025.177.075.328.151.454a.878.878 0 0 0 .302.189c.126.025.277.037.453.037h.341a2.17 2.17 0 0 0 .378-.113h.604v3.401c0 .277-.063.542-.189.794a.966.966 0 0 1-.453.491c-.202.1-.555.177-1.058.227-.479.05-.92.075-1.323.075a4.405 4.405 0 0 1-1.927-.415 5.217 5.217 0 0 1-1.474-1.096 5.095 5.095 0 0 1-.983-1.625 5.36 5.36 0 0 1-.099-.303h-.506a5.721 5.721 0 0 1-1.398 1.966 6.519 6.519 0 0 1-2.078 1.322c-.781.303-1.638.454-2.57.454-1.159 0-2.167-.227-3.023-.68a4.734 4.734 0 0 1-1.928-1.928c-.453-.831-.68-1.814-.68-2.948v-1.133c0-.756.151-1.474.454-2.154a5.529 5.529 0 0 1 1.247-1.777 5.995 5.995 0 0 1 1.927-1.171c.756-.302 1.587-.454 2.494-.454.932 0 1.827.013 2.683.038a60.81 60.81 0 0 1 2.419.114c.266.018.523.038.772.06l.022-.4c.05-.48.088-.983.113-1.512-.101-.554-.302-.983-.605-1.285-.302-.328-.73-.554-1.285-.68-.529-.151-1.222-.227-2.078-.227-.706 0-1.398.038-2.079.113a16.14 16.14 0 0 0-1.927.265c-.605.126-1.234.29-1.89.491h-.604l-.076-1.814v-1.814c0-.201.025-.39.076-.567.075-.176.164-.314.264-.415.202-.202.618-.39 1.247-.567.655-.202 1.45-.365 2.381-.491a22.019 22.019 0 0 1 2.948-.19c1.537 0 2.86.177 3.968.53 1.109.327 2.028.819 2.759 1.473.73.656 1.272 1.474 1.625 2.457.378.957.567 2.066.567 3.326Zm-5.48 5.782v1.144c-.39.285-.781.534-1.172.745a7.107 7.107 0 0 1-1.776.718 7.609 7.609 0 0 1-1.851.227c-.605 0-1.033-.113-1.285-.34-.252-.252-.378-.63-.378-1.134v-1.058c0-.252.025-.479.075-.68.076-.227.164-.429.265-.605.201-.126.416-.227.642-.302.252-.076.53-.114.832-.114.73 0 1.461.013 2.192.038.755 0 1.499.013 2.23.038l.226.008v1.315Zm19.032-13.19c-.68-.302-1.449-.453-2.305-.453-.932 0-1.814.176-2.646.53a5.865 5.865 0 0 0-2.116 1.586c-.579.706-1.046 1.575-1.398 2.608-.328 1.033-.492 2.23-.492 3.59v4.006c0 1.134.152 2.167.454 3.099.302.907.718 1.688 1.247 2.343a5.715 5.715 0 0 0 1.965 1.511 6.114 6.114 0 0 0 2.457.492 5.75 5.75 0 0 0 2.38-.492 6.794 6.794 0 0 0 2.041-1.473 7.968 7.968 0 0 0 1.474-2.155h.605v3.175a8.93 8.93 0 0 1-.114 1.474 4.2 4.2 0 0 1-.302 1.171c-.126.353-.29.668-.491.945-.454.353-1.008.605-1.663.756-.63.176-1.386.264-2.268.264-.73 0-1.423-.037-2.078-.113a10.7 10.7 0 0 1-1.965-.34 16.073 16.073 0 0 1-1.928-.68h-.604a46.72 46.72 0 0 0-.038 1.852v1.89c0 .2.025.402.076.604.075.201.163.378.264.529.227.176.63.365 1.209.567.605.226 1.348.415 2.23.566.882.152 1.852.227 2.91.227 2.217 0 4.069-.403 5.555-1.21 1.512-.78 2.646-1.889 3.401-3.325.781-1.41 1.172-3.099 1.172-5.064V10.648c0-.453-.05-.793-.151-1.02-.101-.227-.227-.39-.378-.491a.855.855 0 0 0-.567-.19h-4.157l-.076 1.437c-.025.453-.037.907-.037 1.36v.19h-.643a5.522 5.522 0 0 0-1.247-1.777 5.326 5.326 0 0 0-1.776-1.171Zm3.666 6.605a6.286 6.286 0 0 0-1.663-1.238 4.919 4.919 0 0 0-2.343-.605c-.655 0-1.209.139-1.663.416-.453.252-.806.642-1.058 1.171-.227.53-.34 1.184-.34 1.966v2.57c0 .604.05 1.12.151 1.549.126.403.29.743.491 1.02.202.177.441.315.718.416.277.1.592.151.945.151.655 0 1.285-.113 1.89-.34a6.063 6.063 0 0 0 1.738-1.134 8.268 8.268 0 0 0 1.134-1.225V15.59ZM.57 32.475h17.875c.252 0 .441.038.567.114a.573.573 0 0 1 .303.34c.075.151.113.365.113.642 0 .68-.013 1.348-.038 2.003v2.079H1.817c-.327 0-.592-.05-.793-.151-.177-.076-.303-.227-.378-.454-.05-.202-.076-.504-.076-.907v-3.666Zm21.904 0H40.35c.252 0 .441.038.567.114a.573.573 0 0 1 .303.34c.075.151.113.365.113.642 0 .68-.013 1.348-.038 2.003v2.079H23.721c-.327 0-.592-.05-.793-.151-.177-.076-.303-.227-.378-.454-.05-.202-.076-.504-.076-.907v-3.666Zm39.78 0H44.377v3.666c0 .403.026.706.076.907.075.227.202.378.378.454.201.1.466.15.794.15h17.572v-2.078c.026-.655.038-1.322.038-2.003 0-.277-.038-.491-.113-.642a.574.574 0 0 0-.303-.34c-.126-.076-.315-.114-.566-.114Zm4.028 0h17.876c.251 0 .44.038.566.114a.573.573 0 0 1 .303.34c.075.151.113.365.113.642 0 .68-.013 1.348-.038 2.003v2.079H67.53c-.327 0-.592-.05-.793-.151-.177-.076-.302-.227-.378-.454-.05-.202-.076-.504-.076-.907v-3.666Zm39.78 0H88.186v3.666c0 .403.026.706.076.907.076.227.202.378.378.454.201.1.466.15.793.15h17.573v-2.078a50.53 50.53 0 0 0 .038-2.003c0-.277-.038-.491-.113-.642a.574.574 0 0 0-.303-.34c-.126-.076-.314-.114-.566-.114Z" clip-rule="evenodd" />
      </svg>
    </div>
    <a :href="githubLink" target="_blank" class="block py-xs text-center bg-white border-b border-slate-200 shadow-outer hover:bg-lime-200 hover:border-lime-400 hover:text-green-900">
      <LogoGithub class="inline mr-2xs mb-[3px]" />Github
    </a>

    <!--- Config --->
    <div class="flex-1 p-[24px] overflow-y-scroll">
      <LabeledInput label="Axis">
        <SegmentedControl property="axis" :values="['all', 'x', 'y']" />
      </LabeledInput>
    </div>

    <!--- Code --->
    <CodeSnippet />
  </aside>
</template>

<script>

import LogoGithub from '@carbon/icons-vue/es/logo--github/24';
import CodeSnippet from './CodeSnippet.vue';
import LabeledInput from '../inputs/LabeledInput.vue';
import SegmentedControl from '../inputs/SegmentedControl.vue';
import info from '../../../../package.json';

export default {
  name: 'ConfigBar',

  components: {
    LogoGithub,
    CodeSnippet,
    LabeledInput,
    SegmentedControl,
  },

  computed: {
    githubLink() {
      return info.bugs.url.replace('/issues', '');
    },
  },
};

</script>
