<div class="two-columns">
    
    <div class="column-one">
        <div class="toolbar-on-left__container">
            <div class="toolbar-on-left">
                <a class="button2" href="#/">Go back</a>
            </div>
        </div>
    </div>
    
    <div class="column-two  text">
        
        <h1>Add feed</h1>
        
        <div>
            <p>Type or copy/paste link to website you want to subscribe to<br/>
            (it could be URL to entire site, or direct link to RSS file).</p>
            <input id="url-input" type="text" ng-model="url" ng-change="urlChange()"
                   placeholder="Put link here" class="add-feed__url-input"/>
            
            <span class="add-feed__indicators">
                <div class="spinner" ng-if="urlValidity == 'checking'"></div>
                <img src="./visual/images/caution.svg" ng-if="urlValidity == 'no' || urlValidity == '404'"/>
                <img src="./visual/images/correct.svg" ng-if="urlValidity == 'yes'"/>
            </span>
            
            <p ng-show="urlValidity == '404'" class="add-feed__error">
                This address returns "not found" (404). Are you sure you typed it correctly?
            </p>
            <p ng-show="urlValidity == 'connectionProblem'" class="add-feed__error">
                This address doesn't exist, or there is problem with internet connection.
                &nbsp; <button ng-click="urlChange()" class="inputty">Try again</button>
            </p>
            <p ng-show="urlValidity == 'no'" class="add-feed__error">
                Sorry. I couldn't figure out any RSS feed on this address.<br/>
                Try to find link to RSS feed on that site by yourself and paste it here.
            </p>
        </div>
        
        <div class="add-feed__pick-category">
            <label>add this feed to category:</label>
            <select ng-model="chosenCategory" ng-options="c.name for c in categories"></select>
        </div>
        <div ng-show="chosenCategory.value == '#addNewCategory#'"  class="add-feed__new-category">
            <label>name of new category:</label>
            <input type="text" ng-model="newCategory"/>
        </div>
        
        <div class="add-feed__done-button">
            <button ng-click="add()"
                    ng-disabled="urlValidity != 'yes' || state == 'loadingFeed'">
                Done!
            </button>
            <span class="add-feed__indicators">
                <div class="spinner" ng-if="state == 'loadingFeed'"></div>
            </span>
        </div>
        
    </div>
    
</div>