{{ template "template-header.html" . }}

<script>
    var selectedItem = 0
    var itemList = [] // required for clipboard and select feature.  I'm too lazy to dynamically load the tables on this page, so this is a quick workaround for now
    {{ range .CraftingItems }}
        itemList.push({
            id: {{ .ID }},
            name: "{{ .Name }}",
        })
    {{ end }}

    {{ range .MarketItems }}
        itemList.push({
            id: {{ .ID }},
            name: "{{ .Name }}",
        })
    {{ end }}

    $(document).ready(function () {
        function setSelected(stateID) {
            console.log("setSelected state: " + stateID)
            $('#state-'+selectedItem).html(stateID)
        }
    })

    // Sets the clipboard to the item name and highlights the item row
    function selectItem(itemID) {
        selectedItem = itemID
        for (var i = 0; i < itemList.length; i++) {
            if (itemList[i].id == itemID) {
                navigator.clipboard.writeText(itemList[i].name);
                break
            }
        }
        $('#tr-'+itemID).addClass("active")
        $("html, body").animate({ scrollTop: $('#tr-'+itemID).offset().top-100})

    }
</script>

    <div class="ui segment">
        <p>This page lists the items that were selected for crafting before checkout, along with the shopping list of materials required for the craft</p>
    </div>

    <h2 class="ui header">Items to Craft</h3>
    <table id="itemTable" class="ui compact celled striped table">
        <thead>
            <tr>
                <th>Item Name</th>
                <th>Job</th>
                <th>Quantity</th>
            </tr>
        </thead>
        <tbody id="itemTableBody">
            {{ range .CraftingItems }}
            <tr id="tr-{{ .ID }}">
                <td data-label="Item Name">
                    <h4><button class="ui circular icon button" onclick="selectItem({{ .ID }})"><i class="icon copy outline"></i></button>{{ .Name }}</h4>
                </td>
                <td data-label="Job">
                    <p>{{ .Job }}</p>
                </td>
                <td class="right aligned" data-label="Quanity">{{ .Quantity }}</td>
            </tr>
            {{ end }}
        </tbody>
    </table>

    <h2 class="ui header">Materials From Retainers</h2>
    <button onclick="location.href = '/auto-xiv';"  class="ui labeled icon button"><i class="blind icon"></i>Auto XIV</button>
    {{ range .Retainers }}
    <h3 class="ui header">{{ .Name }}</h4>
    <table class="ui compact celled striped table">
        <thead>
            <tr>
                <th>Item Name</th>
                <th>Container</th>
                <th>Slot</th>
                <th>Quantity</th>
            </tr>
        </thead>
        <tbody id="craftingMaterialTableBody">
            {{ range .ItemsToGet }}
            <tr>
                <td><h4>{{ .Name }}</h4></td>
                <td>{{ .SortedContainer }}</td>
                <td>{{ .SortedSlotIndex }}</td>
                <td>{{ .Quantity }}</td>
            </tr>
            {{ end }}
        </tbody>
    </table>
    {{ end }}


    <h2 class="ui header">Materials From Market</h2>
    <table class="ui compact celled striped table">
        <thead>
            <tr>
                <th>Item Name</th>
                <th>Quantity</th>
            </tr>
        </thead>
        <tbody id="craftingMaterialTableBody">
            {{ range .MarketItems }}
            <tr id="tr-{{ .ID }}">
                <td><h4><button class="ui circular icon button" onclick="selectItem({{ .ID }})"><i class="icon copy outline"></i></button>{{ .Name }}</h4></td>
                <td>{{ .Quantity }}</td>
            </tr>
            {{ end }}
        </tbody>
    </table>

{{ template "template-footer.html" . }}