{% liquid
    assign section_name = 'Table'
    assign el_id = section_name | handle | append: '-' | append: section.id

    assign settings = section.settings
    assign section_padding = settings.padding
    assign padding_class = 'sp-' | append: section_padding
    if settings.top_half_padding
        assign padding_class = padding_class | append: ' spt-' | append: section_padding | append: '-half'
    endif
    if settings.bottom_half_padding
        assign padding_class = padding_class | append: ' spb-' | append: section_padding | append: '-half'
    endif
%}
<style>
/* table */
#{{ el_id }} .tbl-wrp {
    overflow-x: auto;
}
#{{ el_id }} .tbl-list {
    width: max-content;
    white-space: nowrap;
    margin: 0 auto;
    min-width: calc(100vw - 30px);
}
#{{ el_id }} .tbl-list tr>th:first-child,
#{{ el_id }} .tbl-list tr>td:first-child {
    position: sticky;
    left: 0;
    white-space: nowrap;
    z-index: 3;
    background: unset;
}
#{{ el_id }} .tbl-list.m-sticky tr>th:first-child,
#{{ el_id }} .tbl-list.m-sticky tr>td:first-child {
    background: var(--dark-beige);
}
#{{ el_id }} .tbl-list th,
#{{ el_id }} .tbl-list td {
    padding: 20px 20px;
    border-bottom: 1px solid var(--light-grey);
    white-space: nowrap;
    vertical-align: middle;
}
#{{ el_id }} .tbl-list tr:last-child td {
    border-bottom: 0;
}
#{{ el_id }} .tbl-list td,
#{{ el_id }} .tbl-list td span {
    transition: .4s;
}
#{{ el_id }} .has-bg {
    background: var(--dark-beige);
}
#{{ el_id }} .w5c {
    width: 5%;
}
#{{ el_id }} .w10c {
    width: 10%;
}
#{{ el_id }} .w15c {
    width: 15%;
}
#{{ el_id }} .w20c {
    width: 20%;
}
#{{ el_id }} .w25c {
    width: 25%;
}
#{{ el_id }} .w30c {
    width: 30%;
}
#{{ el_id }} .w35c {
    width: 35%;
}
#{{ el_id }} .w40c {
    width: 40%;
}
#{{ el_id }} .w45c {
    width: 45%;
}
#{{ el_id }} .w50c {
    width: 50%;
}
#{{ el_id }} .w55c {
    width: 55%;
}
#{{ el_id }} .w60c {
    width: 60%;
}
/* END table */

/* bed icon */
#{{ el_id }} .bed-icon-wrp {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
}
#{{ el_id }} .bed-double {
    background-image: url('data:image/svg+xml,<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M28.5712 1.14282H3.42829C2.16593 1.14282 1.14258 2.16617 1.14258 3.42854V28.5714C1.14258 29.8338 2.16593 30.8571 3.42829 30.8571H28.5712C29.8335 30.8571 30.8569 29.8338 30.8569 28.5714V3.42854C30.8569 2.16617 29.8335 1.14282 28.5712 1.14282Z" stroke="%2359483D"/><path d="M15.9997 7.99997H9.85687C8.20001 7.99997 6.85686 6.65682 6.85686 4.99997V1.14282M15.9997 7.99997H22.1426C23.7994 7.99997 25.1426 6.65682 25.1426 4.99997V1.14282M15.9997 7.99997V1.14282M1.14258 13.7143H30.8569" stroke="%2359483D"/></svg>');
    background-size: cover;
    background-position: center;
    width: 32px;
    height: 32px;
}
#{{ el_id }} .bed-single {
    background-image: url('data:image/svg+xml,<svg width="26" height="32" viewBox="0 0 26 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M23.2273 1.22729H2.77273C1.51753 1.22729 0.5 2.24483 0.5 3.50002V28.5C0.5 29.7552 1.51753 30.7727 2.77273 30.7727H23.2273C24.4825 30.7727 25.5 29.7552 25.5 28.5V3.50002C25.5 2.24483 24.4825 1.22729 23.2273 1.22729Z" stroke="%2359483D"/><path d="M18.6818 1.22729V5.04547C18.6818 6.70233 17.3387 8.04548 15.6818 8.04548H10.3182C8.66132 8.04548 7.31818 6.70233 7.31818 5.04548V1.22729M0.5 13.7273H25.5" stroke="%2359483D"/></svg>');
    background-size: cover;
    background-position: center;
    width: 26px;
    height: 32px;
}
/* END bed icon */
/* unit toggle */
#{{ el_id }} .switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 20px;
}
#{{ el_id }} .switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
#{{ el_id }} .slider {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: transparent;
    transition: .4s;
    border-radius: 100px;
    border: 1px solid var(--light-grey);
}
#{{ el_id }} .slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 0;
    top: 0;
    background-color: var(--brown);
    transition: .4s;
    border-radius: 50%;
}
#{{ el_id }} .switch input:checked + .slider {
    background-color: transparent;
}
#{{ el_id }} .switch input:checked + .slider:before {
    transform: translateX(20px);
}
/* END unit toggle */

@media only screen and (min-width:600px) {
    #{{ el_id }} .tbl-list {
        min-width: calc(100vw - 40px);
    }
    #{{ el_id }} .tbl-list.m-sticky tr>th:first-child,
    #{{ el_id }} .tbl-list.m-sticky tr>td:first-child,
    #{{ el_id }} .tbl-list tr>th:first-child,
    #{{ el_id }} .tbl-list tr>td:first-child {
        background: unset;
    }
    #{{ el_id }} .tbl-list.t-sticky tr>th:first-child,
    #{{ el_id }} .tbl-list.t-sticky tr>td:first-child {
        background: var(--dark-beige);
    }
}
@media only screen and (min-width:700px) {
    #{{ el_id }} .tbl-list.m-sticky tr>th:first-child,
    #{{ el_id }} .tbl-list.m-sticky tr>td:first-child,
    #{{ el_id }} .tbl-list.t-sticky tr>th:first-child,
    #{{ el_id }} .tbl-list.t-sticky tr>td:first-child,
    #{{ el_id }} .tbl-list tr>th:first-child,
    #{{ el_id }} .tbl-list tr>td:first-child {
        background: unset;
    }
}
@media only screen and (min-width:1024px) {
    #{{ el_id }} .tbl-list {
        min-width: 800px;
    }
    #{{ el_id }} .tbl-list.m-sticky tr>th:first-child,
    #{{ el_id }} .tbl-list.m-sticky tr>td:first-child,
    #{{ el_id }} .tbl-list.t-sticky tr>th:first-child,
    #{{ el_id }} .tbl-list.t-sticky tr>td:first-child,
    #{{ el_id }} .tbl-list tr>th:first-child,
    #{{ el_id }} .tbl-list tr>td:first-child {
        background: unset;
    }
}
</style>

{% if section.blocks.size > 0 %}
<div id="{{ el_id }}" class="relative {{ padding_class }}">
    <div class="container">
        {%- assign table_datas = '' -%}
        {%- for block in section.blocks -%}
            <div id="{{ block.settings.id }}" class="relative d-max-800 mx-auto {% unless forloop.first %}mt-60 d-mt-80{% endunless %}">
                <h3 class="h3 tc">{{ block.settings.title }}</h3>
                <div class="tbl-wrp relative mt-30 d-mt-50">
                    {{ block.settings.table }}
                </div>
            </div>
            {%- capture table_item_data -%}
            {
                id: '{{ block.settings.id }}',
                unit: 'cm',
                isInchi: false
            }
            {%- endcapture -%}
            {%- assign table_datas = table_datas | append: ',' | append: table_item_data -%}
        {%- endfor -%}
        {%- assign table_datas = table_datas | remove_first: ',' -%}
    </div>
</div>
<script>
Vue.createApp({
    delimiters: ['${', '}'],
    data() {
        return {
            tables: [{{ table_datas }}],
            screen: {
                hhd: window.innerWidth > 1919,
                hd: window.innerWidth > 1365 && window.innerWidth < 1920,
                d: window.innerWidth > 1023 && window.innerWidth < 1366,
                t: window.innerWidth > 599 && window.innerWidth < 1024,
                m: window.innerWidth < 600
            }
        }
    },
    mounted() {
        addEventListener('resize', () => {
            this.screen.hhd = window.innerWidth > 1919;
            this.screen.hd = window.innerWidth > 1365 && window.innerWidth < 1920;
            this.screen.d = window.innerWidth > 1023 && window.innerWidth < 1366;
            this.screen.t = window.innerWidth > 599 && window.innerWidth < 1024;
            this.screen.m = window.innerWidth < 600;
        });
    },
    methods: {
    }
}).mount('#{{ el_id }}');
</script>
{% endif %}

{% schema %}
{
    "name": "Table",
    "settings": [
        {
            "type": "header",
            "content": "Section Padding"
        },
        {
            "type": "select",
            "id": "padding",
            "label": "Padding",
            "options": [
                {
                    "value": "no",
                    "label": "No"
                },
                {
                    "value": "sm",
                    "label": "Small"
                },
                {
                    "value": "md",
                    "label": "Med"
                },
                {
                    "value": "lg",
                    "label": "Large"
                }
            ],
            "default": "md"
        },
        {
            "type": "checkbox",
            "id": "top_half_padding",
            "label": "Top half padding",
            "default": false
        },
        {
            "type": "checkbox",
            "id": "bottom_half_padding",
            "label": "Bottom half padding",
            "default": false
        }
    ],
    "blocks": [
        {
            "name": "Table",
            "type": "table",
            "settings": [
                {
                    "type": "text",
                    "id": "title",
                    "label": "Title"
                },
                {
                    "type": "text",
                    "id": "id",
                    "label": "ID Table for anchor link"
                },
                {
                    "type": "textarea",
                    "id": "table",
                    "label": "Table Content"
                }
            ]
        }
    ],
    "presets": [{ "name": "Table" }]
}
{% endschema %}