<script type="text/x-template" id="tmpl-camera-android-ipcam">
    <div class="camera">
        <div class="camera-selector">
            <select ref="cameraSelector" @change="onCameraSelected" v-if="hasMultipleCameras">
                <option v-for="(cam, name) in cameras"
                        :key="name" :value="name">
                    {% raw %}{{ name }}{% endraw %}
                </option>
            </select>
        </div>

        <div class="camera-container">
            <div class="no-frame" v-if="!streaming && !capturing">The camera is not active</div>
            <img class="frame" ref="frame">
        </div>

        <div class="controls">
            <button type="button" @click="startStreaming" :disabled="capturing || loading" v-if="!streaming">
                <i class="fa fa-play"></i>&nbsp; Start streaming video
            </button>

            <button type="button" @click="stopStreaming" :disabled="capturing || loading" v-else>
                <i class="fa fa-stop"></i>&nbsp; Stop streaming video
            </button>

            <button type="button" @click="capture" :disabled="streaming || capturing || loading">
                <i class="fas fa-camera"></i>&nbsp; Take snapshot
            </button>
        </div>

        <div class="controls">
            <button type="button" @click="recording = true" v-if="!recording" :disabled="loading">
                <i class="fa fa-play"></i>&nbsp; Start streaming audio
            </button>

            <button type="button" @click="recording = false" v-else :disabled="loading">
                <i class="fa fa-stop"></i>&nbsp; Stop streaming audio
            </button>

            <button type="button" @click="flipCamera" :disabled="loading">
                <i class="fas fa-retweet"></i> Flip camera
            </button>
        </div>

        <div class="controls">
            <button type="button" @click="updateCameraStatus" :disabled="loading">
                <i class="fas fa-sync-alt"></i>&nbsp; Refresh available cameras
            </button>
        </div>

        <div class="sound-container">
            <audio autoplay preload="none" ref="player" v-if="recording">
                <source :src="cameras[selectedCamera].audio_url" type="audio/x-wav;codec=pcm">
                Your browser does not support audio elements
            </audio>
        </div>
    </div>
</script>

