<div class="col-4">
      <div class="row">
        <Dropdown col1={true} label="Style" bind:value={data.style}>
          <option value=1 selected>Short</option>
          <option value=2>Paragraph</option>
        </Dropdown>
      </div>
      <div class="row">
        <Checkbox label="Optional" bind:value={data.optional}/>
      </div>
    </div>
  </div>

{#if windowWidth <= 950}
    <div class="row">
      {#if withDirectionButtons}
        <div class="col-2">
          <form on:submit|preventDefault={() => forwardMove("down")} class="button-form">
            <Button icon="fas fa-chevron-down" disabled={index >= formLength - 1} />
          </form>
        </div>
        <div class="col-2">
          <form on:submit|preventDefault={() => forwardMove("up")} class="button-form">
            <Button icon="fas fa-chevron-up" disabled={index === 0} />
          </form>
        </div>
      {/if}
      {#if withSaveButton}
        <form on:submit|preventDefault={forwardSave} class="button-form">
          <Button icon="fas fa-save">Save</Button>
        </form>
      {/if}
      {#if withDeleteButton}
        <form on:submit|preventDefault={forwardDelete} class="button-form">
          <Button icon="fas fa-trash" danger={true}>Delete</Button>
        </form>
      {/if}
    </div>
  {/if}

{#if withCreateButton}
    <div class="row" style="justify-content: center; margin-top: 10px">
      <Button type="submit" icon="fas fa-plus">Add Input</Button>
    </div>
  {/if}
</form>

<svelte:window bind:innerWidth={windowWidth} />

import Input from "../form/Input.svelte";
  import Dropdown from "../form/Dropdown.svelte";
  import Button from "../Button.svelte";
  import Textarea from "../form/Textarea.svelte";
  import Checkbox from "../form/Checkbox.svelte";

export let withCreateButton = false;
  export let withSaveButton = false;
  export let withDeleteButton = false;
  export let withDirectionButtons = false;

export let index;
  export let formLength;

export let data = {};

$: windowWidth = 0;

function forwardCreate() {
    dispatch('create', data);
  }

function forwardSave() {
    dispatch('save', data);
  }

function forwardDelete() {
    dispatch('delete', {});
  }

function forwardMove(direction) {
    dispatch('move', {direction: direction});
  }
</script>

.row {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        width: 100%;
        height: 100%;
    }

.sub-row {
        display: flex;
        flex-direction: row;
    }

.button-form {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        padding-bottom: 0.5em;
    }

.buttons-row > :not(:last-child) {
        margin-right: 10px;
    }

@media only screen and (max-width: 950px) {
        .row {
            flex-direction: column;
        }

.settings-row {
            flex-direction: column-reverse !important;
        }
    }
</style>