{{template "base" .}}

{{define "content"}}
<div class="container">
    <div class="row">
        <div class="col">
            <h1 class="mt-3">Design Patterns in Go</h1>
            <hr>
            <h3>Factory</h3>
            <div>
                <a href="javascript:void(0);" id="dog-factory-btn" class="btn btn-outline-secondary">Get a dog from factory</a>
                <a href="javascript:void(0);" id="cat-factory-btn" class="btn btn-outline-secondary">Get a cat from factory</a>
            </div>
            <div class="mt-2" style="outline: 1px solid silver; padding: 2em;">
                <pre id="dog-factory-output"><span class="text-muted">Nothing received yet...</span></pre>
            </div>

            <hr class="mt-4">

            <h3 class="mt-3">Abstract Factory</h3>

            <div>
                <a href="javascript:void(0);" id="dog-abstract-btn" class="btn btn-outline-secondary">
                    Get a dog from abstract factory
                </a>

                <a href="javascript:void(0);" id="cat-abstract-btn" class="btn btn-outline-secondary">
                    Get a cat from abstract factory
                </a>
            </div>

            <div class="mt-2" style="outline: 1px solid silver; padding: 2em;">
                <pre id="abstract-output"><span class="text-muted">Nothing received yet...</span></pre>
            </div>

            <hr class="mt-4">

            <h3 class="mt-3">Builder</h3>

            <div>
                <a href="javascript:void(0);" id="dog-builder-btn" class="btn btn-outline-secondary">
                    Build a dog
                </a>

                <a href="javascript:void(0);" id="cat-builder-btn" class="btn btn-outline-secondary">
                    Build a cat
                </a>
            </div>

            <div class="mt-2" style="outline: 1px solid silver; padding: 2em;">
                <pre id="builder-output"><span class="text-muted">Nothing received yet...</span></pre>
            </div>

            <hr class="mt-4">

            <h3 class="mt-3">Abstract Factory II</h3>

            <form>
                <div class="row mb-3">
                    <label for="species" class="col-sm-2 col-form-label">Species</label>
                    <select id="species" class="form-select">
                        <option selected>Choose...</option>
                        <option value="cat">Cat</option>
                        <option value="dog">Dog</option>
                    </select>
                </div>
                <div class="row mb-3">
                    <label for="breed" class="col-sm-2 col-form-label">Breed</label>
                    <input type="text" class="form-control" id="breed">
                </div>
                <a href="javascript:void(0);" id="abstract-factory-ii-btn" class="btn btn-outline-secondary">
                    Get from abstract factory
                </a>
            </form>

            <div class="mt-2" style="outline: 1px solid silver; padding: 2em;">
                <pre id="abstract-factory-ii-output"><span class="text-muted">Nothing received yet</span></pre>
            </div>

        </div>
    </div>
</div>
{{end}}

{{define "js"}}
<script>
let dogFactoryButton = document.getElementById("dog-factory-btn");
let catFactoryButton = document.getElementById("cat-factory-btn");
let dogFactoryOutput = document.getElementById("dog-factory-output");

let dogAbstractBtn = document.getElementById("dog-abstract-btn");
let catAbstractBtn = document.getElementById("cat-abstract-btn");
let abstractFactoryOutput = document.getElementById("abstract-output");

let dogBuilderBtn = document.getElementById("dog-builder-btn");
let catBuilderBtn = document.getElementById("cat-builder-btn");
let builderOutput = document.getElementById("builder-output");

let abstractFactoryIIBtn = document.getElementById("abstract-factory-ii-btn");
let abstractFactoryIIOutput = document.getElementById("abstract-factory-ii-output");

document.addEventListener("DOMContentLoaded", function() {
    dogFactoryButton.addEventListener("click", function() {
        fetch("/api/dog-from-factory", {method: 'get'})
        .then((response) => response.json())
        .then((data) => {
            if (data.error) {
                dogFactoryOutput.innerHTML = data.error;
            } else {
                dogFactoryOutput.innerHTML = JSON.stringify(data, undefined, 4);
            }
        })
    })

    catFactoryButton.addEventListener("click", function() {
        fetch("/api/cat-from-factory", {method: 'get'})
        .then((response) => response.json())
        .then((data) => {
            if (data.error) {
                dogFactoryOutput.innerHTML = data.error;
            } else {
                dogFactoryOutput.innerHTML = JSON.stringify(data, undefined, 4);
            }
        })
    })

    dogAbstractBtn.addEventListener("click", function() {
        fetch("/api/dog-from-abstract-factory", {method: 'get'})
        .then((response) => response.json())
        .then((data) => {
            if (data.error) {
                abstractFactoryOutput.innerHTML = data.error;
            } else {
                abstractFactoryOutput.innerHTML = JSON.stringify(data, undefined, 4);
            }
        })
    })

    catAbstractBtn.addEventListener("click", function() {
        fetch("/api/cat-from-abstract-factory", {method: 'get'})
        .then((response) => response.json())
        .then((data) => {
            if (data.error) {
                abstractFactoryOutput.innerHTML = data.error;
            } else {
                abstractFactoryOutput.innerHTML = JSON.stringify(data, undefined, 4);
            }
        })
    })

    dogBuilderBtn.addEventListener("click", function() {
        fetch("/api/dog-from-builder", {method: 'get'})
            .then((response) => response.json())
            .then((data) => {
                if (data.error) {
                    builderOutput.innerHTML = data.error;
                } else {
                    builderOutput.innerHTML = JSON.stringify(data, undefined, 4);
                }
            })
    })

    catBuilderBtn.addEventListener("click", function () {
                fetch("/api/cat-from-builder", {method: 'get'})
                    .then((response) => response.json())
                    .then((data) => {
                        if (data.error) {
                            builderOutput.innerHTML = data.error;
                        } else {
                            builderOutput.innerHTML = JSON.stringify(data, undefined, 4);
                        }
                    })
                    .catch((error) => {
                        console.log(error);
                    })
            })

    abstractFactoryIIBtn.addEventListener("click", function () {
                let species = document.getElementById("species").value;
                let breed = document.getElementById("breed").value;

                fetch(`/api/animal-from-abstract-factory/${species}/${breed}`, {method: 'get'})
                    .then((response) => response.json())
                    .then((data) => {
                        if (data.error) {
                            abstractFactoryIIOutput.innerHTML = data.error;
                        } else {
                            abstractFactoryIIOutput.innerHTML = JSON.stringify(data, undefined, 4);
                        }
                    })
                    .catch((error) => {
                        console.log(error);
                    })
            })
})

</script>

{{end}}