<div class="ui dividing header">Start-Up</div>
<div class="twelve wide column">
    <div class="ui grid">
        <div class="middle aligned row">
            <div class="right aligned four wide column">
                <label>Listening IP Address</label>
            </div>
            <div class="five wide column">
                <div class='field'>
                    <div class="ui fluid input">
                        <input name="settings_general_ip" type="text" value="{{ settings.general.ip }}">
                    </div>
                </div>
            </div>

            <div class="collapsed center aligned column">
                <div class="ui basic icon" data-tooltip="Requires A Restart To Take Effect" data-inverted="">
                    <i class="yellow warning sign icon"></i>
                </div>
            </div>
            <div class="collapsed center aligned column">
                <div class="ui basic icon" data-tooltip="Valid IP4 Address or '0.0.0.0' for all interfaces"
                     data-inverted="">
                    <i class="help circle large icon"></i>
                </div>
            </div>
        </div>

        <div class="middle aligned row">
            <div class="right aligned four wide column">
                <label>Listening Port</label>
            </div>
            <div class="five wide column">
                <div class='field'>
                    <div class="ui fluid input">
                        <input name="settings_general_port" type="text" value="{{ settings.general.port }}">
                    </div>
                </div>
            </div>

            <div class="collapsed center aligned column">
                <div class="ui basic icon" data-tooltip="Requires A Restart To Take Effect" data-inverted="">
                    <i class="yellow warning sign icon"></i>
                </div>
            </div>
            <div class="collapsed center aligned column">
                <div class="ui basic icon" data-tooltip="Valid TCP Port (default: 6767)" data-inverted="">
                    <i class="help circle large icon"></i>
                </div>
            </div>
        </div>

        <div class="middle aligned row">
            <div class="right aligned four wide column">
                <label>Base URL</label>
            </div>
            <div class="five wide column">
                <div class="ui fluid input">
                    {% if settings.general.base_url == None %}
                        {% set base_url = "/" %}
                    {% else %}
                        {% set base_url = settings.general.base_url %}
                    {% endif %}
                    <input name="settings_general_baseurl" type="text">
                </div>
            </div>

            <div class="collapsed center aligned column">
                <div class="ui basic icon" data-tooltip="Requires A Restart To Take Effect" data-inverted="">
                    <i class="yellow warning sign icon"></i>
                </div>
            </div>
            <div class="collapsed center aligned column">
                <div class="ui basic icon" data-tooltip="For Reverse Proxy Support, Default Is '/'" data-inverted="">
                    <i class="help circle large icon"></i>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="ui dividing header">Path Mappings For TV Shows</div>
<div class="twelve wide column">
    <div class="ui grid">
        {% if settings.general.path_mappings != None %}
            {% set path_substitutions = ast.literal_eval(settings.general.path_mappings) %}
        {% else %}
            {% set path_substitutions = [] %}
        {% endif %}<div class="middle aligned row"><div class="right aligned four wide column">

                </div><div class="two wide column"><div class="ui fluid input"><h4 class="ui header">Path for Sonarr:</h4></div></div><div class="collapsed column"><div class="collapsed center aligned column"><div class="ui basic icon" data-tooltip="Root path to the directory Sonarr accesses." data-inverted=""><i class="help circle large icon"></i></div></div></div><div class="two wide center aligned column">

                </div><div class="two wide column"><div class="ui fluid input"><h4 class="ui header">Path for Bazarr:</h4></div></div><div class="collapsed column"><div class="collapsed center aligned column"><div class="ui basic icon" data-tooltip="Path that Bazarr should use to access the same directory remotely." data-inverted=""><i class="help circle large icon"></i></div></div></div></div>
        {% for x in range(0, 5) %}
            {% set path = [] %}
            {% if path_substitutions[x] %}
            {% set path = path_substitutions[x] %}
            {% else %}
            {% set path = ["", ""] %}
            {% endif %}
        <div class="middle aligned row">
            <div class="right aligned four wide column">

            </div>
            <div class="four wide column">
                <div class="ui fluid input">
                    <input name="settings_general_sourcepath[]" type="text">
                </div>
            </div>
            <div class="center aligned column">
                <i class="arrow circle right icon"></i>
            </div>
            <div class="four wide column">
                <div class="ui fluid input">
                    <input name="settings_general_destpath[]" type="text">
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
</div>

<div class="ui dividing header">Path Mappings For Movies</div>
<div class="twelve wide column">
    <div class="ui grid">
        {% if settings.general.path_mappings_movie != None %}
            {% set path_substitutions_movie = ast.literal_eval(settings.general.path_mappings_movie) %}
        {% else %}
            {% set path_substitutions_movie = [] %}
        {% endif %}
        <div class="middle aligned row">
            <div class="right aligned four wide column">

            </div>
            <div class="two wide column">
                <div class="ui fluid input">
                    <h4 class="ui header">
                        Path for Radarr:
                    </h4>
                </div>
            </div>
            <div class="collapsed column">
                <div class="collapsed center aligned column">
                    <div class="ui basic icon" data-tooltip="Root path to the directory Radarr accesses."
                         data-inverted="">
                        <i class="help circle large icon"></i>
                    </div>
                </div>
            </div>
            <div class="two wide center aligned column">

            </div>
            <div class="two wide column">
                <div class="ui fluid input">
                    <h4 class="ui header">
                        Path for Bazarr:
                    </h4>
                </div>
            </div>
            <div class="collapsed column">
                <div class="collapsed center aligned column">
                    <div class="ui basic icon"
                         data-tooltip="Path that Bazarr should use to access the same directory remotely."
                         data-inverted="">
                        <i class="help circle large icon"></i>
                    </div>
                </div>
            </div>
        </div>
        {% for x in range(0, 5) %}
            {% set path_movie = [] %}
            {% if path_substitutions_movie[x] %}
            {% set path_movie = path_substitutions_movie[x] %}
            {% else %}
            {% set path_movie = ["", ""] %}
            {% endif %}
            <div class="middle aligned row">
                <div class="right aligned four wide column">

                </div>
                <div class="four wide column">
                    <div class="ui fluid input">
                        <input name="settings_general_sourcepath_movie[]" type="text">
                    </div>
                </div>
                <div class="center aligned column">
                    <i class="arrow circle right icon"></i>
                </div>
                <div class="four wide column">
                    <div class="ui fluid input">
                        <input name="settings_general_destpath_movie[]" type="text">
                    </div>
                </div>
            </div>
        {% endfor %}
    </div>
</div>

<script>

</script>
