

    <div class="col-lg-4 col-md-4">
        <h3 class="list-heading">Video Encoding</h3>
        {# TODO: Add pagination #}
        All video files contain a number of <span class="sbold">streams</span>. At least one of these streams carries the video information.
        <br>
        <br>
        This video information is compressed in a standard format called a <span class="sbold">codec</span>.
        <br>
        Different codecs have different pros and cons such as smaller file formats or better compatibility with older video players.
        <br>
        You may wish to standardise the video codec streams of your files to better suit your needs.
        <br>
        <br>
        In order to compress a video stream into a particular codec, we need to use a video <span class="sbold">encoder</span>.
        <br>
        As it is with the codecs, the different encoders also have their pros and cons. Some encoders produce better quality results but take longer to encode, while others require specific hardware to be available in order to work at all.
        <br>
        <hr/>
        If <span class="sbold">`Enable Video Encoding`</span> is not selected, all video streams from the source file will be copied through to the output file without the codec being modified.
        <br>
        <br>
        If you choose to select <span class="sbold">`Enable Video Encoding`</span>, you may choose to transcode your video streams to a standard video codec using the <span class="sbold">`Video Codec`</span> drop-down.
        <br>
        <br>
        Once you have selected a <span class="sbold">`Video Codec`</span> drop-down, you may also select an encoder using the <span class="sbold">`Video Encoder`</span> drop-down.
    </div>
    <div class="col-lg-6 col-md-8">
        <!-- BEGIN FORM PORTLET-->
        <div class="portlet light bordered">
            <div class="portlet-body form">
                <form class="form-horizontal" role="form" method="POST">
                    <div class="form-body">

                        {# Enable/Disable settings on this screen #}
                        <div class="form-group">
                            <label class="col-md-3 control-label">Enable Video Encoding</label>
                            <div class="col-md-9">
                                <div class="checkbox-list">
                                    <input type="hidden" name="ENABLE_VIDEO_ENCODING" id="ENABLE_VIDEO_ENCODING"
                                           value="{% if config.get_enable_video_encoding() %}true{% end %}">
                                    <label>
                                        <input type="checkbox" id="video_encoding_enabled"
                                               onchange="toggleEnableVideoEncoding();" {% if config.get_enable_video_encoding() %}
                                               checked {% end %} />
                                    </label>
                                </div>
                            </div>
                        </div>
                        <hr/>

                        <div class="video_encoding_settings_disabled_notice {% if config.get_enable_video_encoding() %}hidden{% end %}">
                            <div class="note note-info caption">
                                <span class="caption-subject font-dark sbold uppercase">Video streams will be copied</span>
                                <br>
                                <span class="help-inline">
                                    All video streams will be copied to the destination file without being modified.
                                </span>
                            </div>
                            <hr/>
                        </div>

                        <div class="video_encoding_settings {% if not config.get_enable_video_encoding() %}hidden{% end %}">

                            {# Transcoding video streams #}
                            <div class="caption">
                                <span class="caption-subject font-dark sbold uppercase">Transcode the video stream</span>
                                <br>
                                <span class="help-inline">
                                    Modify the video stream codec.
                                </span>
                            </div>
                            <br>
                            <div class="video_stream_transcoding_settings">
                                <div class="form-group">
                                    <label class="col-md-3 control-label">Video Codec</label>
                                    <div class="col-md-9">
                                        <select class="form-control"
                                                id="VIDEO_CODEC"
                                                name="VIDEO_CODEC"
                                                onchange="setVideoStreamEncoderListForTranscoding();">
                                            {% set supported_video_configs = config.get_supported_video_codecs() %}
                                            {% for option in supported_video_configs %}
                                            <option value="{{ escape(option) }}" {% if option == config.get_video_codec() %}
                                                    selected {% end %}>
                                                {{ escape(supported_video_configs[option]['description']) }}
                                            </option>
                                            {% end %}
                                        </select>
                                        <span class="help-inline"> Select the output video codec </span>
                                    </div>
                                </div>
                                <br>
                                {# If there is only one option, disable this field #}
                                <div class="form-group" id="video_stream_encoder_selection">
                                    {% include "video_stream_encoder.html" %}
                                </div>
                            </div>

                        </div>
                    </div>
                    <div class="form-actions">
                        <div class="row">
                            <div class="col-md-offset-3 col-md-9">
                                <button type="submit" class="btn green">Submit</button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <!-- END FORM PORTLET-->
    </div>
