<template>
        <div class="row pt-2 gy-2">
            <div class="col d-flex justify-content-center">
                <form id="mode-input" class="btn-group" role="group" aria-label="Select mode">
                    <input type="radio" class="btn-check" name="mode-selection" id="test-mode" autocomplete="off" value="0" checked>
                    <input type="radio" class="btn-check" name="mode-selection" id="artnet-mode" autocomplete="off" value="1">
                    <input type="radio" class="btn-check" name="mode-selection" id="auto-mode" autocomplete="off" value="2">
                    <input type="radio" class="btn-check" name="mode-selection" id="manual-mode" autocomplete="off" value="3">
                </form>
            </div>
            <div class="col d-flex justify-content-center">
                <form id="pattern-input" class="btn-group" role="group" aria-label="Select pattern">
                    <input type="radio" class="btn-check" name="pattern-selection" id="pulse-pattern" autocomplete="off" value="0" checked>
                    <input type="radio" class="btn-check" name="pattern-selection" id="travel-pattern" autocomplete="off" value="1">
                    <input type="radio" class="btn-check" name="pattern-selection" id="strobe-pattern" autocomplete="off" value="2">
                </form>
            </div>
        </div>
</template>

<script>
export default {
  name: 'Reconnect',
  props: {
    msg: String
  }
}
</script>

<style scoped>
#reconnectBackdrop{
    visibility: hidden;
}
</style>
