<div class="two-columns">

    <div class="column-one  column-flex">
        
        <div class="feeds-tree__header  column-flex__item">
            <div class="feeds-tree__header__buttons-wrap">
                <div>
                    <a class="button1  button1--gap-right" href="#/add">
                        <svg class="button1__icon" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                            width="128px" height="128px" viewBox="0 0 128 128" enable-background="new 0 0 128 128" xml:space="preserve">
                        <path class="button1__icon-obj" d="m 62.15625,24.59375 c -3.057715,0.111918 -5.925666,0.757314 -5.90533,4 l 0,27.65717 -27.65717,0 c -3.706,0 -4,3.54208 -4,7.24908 0,3.706 0.294076,7.272767 4,7.24908 l 27.65717,0 0,27.65717 c 0,3.707 3.54308,4 7.24908,4 3.708,0 6.456344,-0.3023 6.71875,-4 l 0,-27.65717 28.1875,0 c 3.707,0 4,-3.54308 4,-7.24908 0,-3.707 -0.293,-7.24908 -4,-7.24908 l -28.1875,0 0,-27.65717 c 0,-3.706 -3.01075,-4 -6.71875,-4 -0.46325,0 -0.906934,-0.01599 -1.34375,0 z"/>
                        </svg>
                        add feed
                    </a>
                </div>
                <div class="dropdown">
                    <a class="button1">
                        <svg class="button1__icon" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                            width="128px" height="128px" viewBox="0 0 128 128" enable-background="new 0 0 128 128" xml:space="preserve">
                        <path class="button1__icon-obj" d="m 88.649,46.273727 c 1.991,-1.969 5.21,-1.393727 7.201,0.575273 1.984,1.967 1.987,5.733273 0,7.703273 l -28.75,28.174 c -1.988,1.968 -5.212,1.968 -7.201,0 l -28.747,-28.173 c -1.989,-1.971 -1.989,-5.734273 0,-7.703273 1.988,-1.969 5.21,-2.544273 7.197,-0.576273 l 25.151,23.104 z"/>
                        </svg>
                        more
                    </a>
                    <div class="dropdown__menu">
                        <div class="dropdown__menu-wrap">
                            <a tabindex="-1" href="#/organize">organize</a>
                            <a tabindex="-1" href="#/tags">tags</a>
                            <a tabindex="-1" href="#/importExport">import/export</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="toolbar-on-left">
                <span ng-click="refresh()" class="button2  button2--special">
                    <svg class="button2__icon" width="128px" height="128px" viewBox="0 0 128 128" enable-background="new 0 0 128 128">
                        <path class="button2__icon-obj"
                            d="M 35.09814,31.751952 C 52.591661,16.450332 79.069171,18.024375 94.759075,35.096307 L 108.26906,22.879318 107.78567,61.193612 69.750983,56.571163 84.855684,44.253524 C 74.21131,32.857325 56.401391,31.855662 44.61472,42.165486 c -12.031128,10.523655 -13.224988,28.8366 -2.668389,40.905395 10.5566,12.068795 28.866248,13.321985 40.896669,2.798947 4.824532,-4.220029 7.901538,-9.693646 9.180418,-15.513599 l 13.340012,1.761103 C 103.65149,81.179712 99.0138,89.749423 91.5439,96.283363 73.780449,111.82109 46.746381,109.97128 31.158404,92.150366 15.570428,74.329466 17.334693,47.28968 35.09814,31.751952"/>
                    </svg>
                </span>
            </div>
        </div>
        
        <div class="feeds-tree__content-wrap  column-flex__item  column-flex__item--greedy">
            <div class="feeds-tree__content  scroll">
                <div class="feeds-tree__category-container  feeds-tree__category-container--nested">
                    <h1 ng-click="selectCategory(all)"
                        ng-class="{'feeds-tree__category--selected': selectedCategory == all}"
                        class="feeds-tree__category">
                        <span class="feeds-tree__category-name">All</span>
                        <span class="feeds-tree__count">{{all.unreadArticlesCount}}</span>
                    </h1>
                </div>
                <div ng-repeat="item in feedsTree" ng-switch="item.type"
                    class="feeds-tree__category-container">
                    <div ng-switch-when="category"
                        class="feeds-tree__category-container  feeds-tree__category-container--nested">
                        <h1 ng-click="selectCategory(item)"
                            ng-class="{'feeds-tree__category--selected': selectedCategory == item}"
                            class="feeds-tree__category">
                            <span class="feeds-tree__category-name">{{item.title}}</span>
                            <span ng-show="item.unreadArticlesCount > 0" class="feeds-tree__count">{{item.unreadArticlesCount}}</span>
                        </h1>
                        <h2 ng-repeat="feed in item.feeds"
                            ng-click="selectCategory(feed)"
                            ng-class="{'feeds-tree__category--selected': selectedCategory == feed}"
                            class="feeds-tree__category  feeds-tree__category--minor">
                            <div ng-hide="feed.faviconUrl != undefined" class="feeds-tree__icon  feeds-tree__icon--none"/>
                            <img ng-show="feed.faviconUrl != undefined" ng-src="{{feed.faviconUrl}}" class="feeds-tree__icon"/>
                            <span class="feeds-tree__category-name">{{feed.title}}</span>
                            <span ng-show="feed.unreadArticlesCount > 0" class="feeds-tree__count">{{feed.unreadArticlesCount}}</span>
                        </h2>
                    </div>
                    <!-- same as above -->
                    <h2 ng-switch-when="feed"
                        ng-click="selectCategory(item)"
                        ng-class="{'feeds-tree__category--selected': selectedCategory == item, 'feeds-tree__category-last-minor': $last == true}"
                        class="feeds-tree__category  feeds-tree__category--minor">
                        <div ng-hide="item.faviconUrl != undefined" class="feeds-tree__icon  feeds-tree__icon--none"/>
                        <img ng-show="item.faviconUrl != undefined" ng-src="{{item.faviconUrl}}" class="feeds-tree__icon"/>
                        <span class="feeds-tree__category-name">{{item.title}}</span>
                        <span ng-show="item.unreadArticlesCount > 0" class="feeds-tree__count">{{item.unreadArticlesCount}}</span>
                    </h2>
                </div>
            </div>
        </div>
        
        <div class="feeds-tree__footer  column-flex__item">
            <a class="button1  local-anchor" href="#/about/about">
                <img src="visual/images/about.svg" />
            </a>
            <a class="button1  local-anchor" href="#/settings">
                <img src="visual/images/settings.svg" />
            </a>
            <a class="button1  local-anchor" href="#/about/controls">
                <img src="visual/images/controls.svg" />
            </a>
            <a class="button1  new-version-button  local-anchor" href="#/about/update" ng-show="newVersionAvailable != null">
                New version!
            </a>
        </div>
        
    </div>
    
    <div class="column-two">
        
            <div ng-if="state == 'noFeeds'" class="center  welcome  text">
                <h1>Welcome to Sputnik!</h1>
                <p><br/>Now you can add your first feed</p>
                <p>
                    <a class="button2  local-anchor" href="#/add">
                        <svg class="button2__icon" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                            width="128px" height="128px" viewBox="0 0 128 128" enable-background="new 0 0 128 128" xml:space="preserve">
                        <path class="button2__icon-obj" d="m 62.15625,24.59375 c -3.057715,0.111918 -5.925666,0.757314 -5.90533,4 l 0,27.65717 -27.65717,0 c -3.706,0 -4,3.54208 -4,7.24908 0,3.706 0.294076,7.272767 4,7.24908 l 27.65717,0 0,27.65717 c 0,3.707 3.54308,4 7.24908,4 3.708,0 6.456344,-0.3023 6.71875,-4 l 0,-27.65717 28.1875,0 c 3.707,0 4,-3.54308 4,-7.24908 0,-3.707 -0.293,-7.24908 -4,-7.24908 l -28.1875,0 0,-27.65717 c 0,-3.706 -3.01075,-4 -6.71875,-4 -0.46325,0 -0.906934,-0.01599 -1.34375,0 z"/>
                        </svg>
                        add feed
                    </a>
                </p>
                <p>or</p>
                <p>
                    <a class="button2  button2--with-text  local-anchor" href="#/importExport">
                        <svg class="button2__icon" width="128px" height="128px" viewBox="0 0 128 128" enable-background="new 0 0 128 128">
                            <path class="button2__icon-obj"
                                d="M57.625,69.902l49.624,0.292l-16.1-16.099l31.981-31.981l-16.996-16.99    L74.16,37.105L57.647,20.589L57.625,69.902z M127.277,70.021l-12.24-12.414l0.225,57.419l-102.094,0.056l0.097-101.832L70.375,13    L57.625,0.25H13C5.959,0.25,0.25,5.959,0.25,13v102c0,7.041,5.709,12.75,12.75,12.75h102c7.041,0,12.75-5.709,12.75-12.75    L127.277,70.021z"/>
                        </svg>
                        import feeds from file
                    </a>
                </p>
            </div>
            
            <div ng-if="state == 'refreshing'" class="center  refreshing">
                <div class="refreshing__label">
                    Checking what's new...
                </div>
                <div class="refreshing__progress">
                    <div class="refreshing__progress-bar"></div>
                </div>
            </div>
            
            <div ng-show="state == 'articles'" class="articles-sheet  scroll  js-external-link  js-articles-list">
                <div class="articles-sheet__element">
                    <h1 class="articles-sheet__category">
                        <span ng-hide="selectedCategory.type == 'feed' && selectedCategory.siteUrl">
                            {{selectedCategory.title}}
                        </span>
                        <a ng-show="selectedCategory.type == 'feed' && selectedCategory.siteUrl" ng-href="{{selectedCategory.siteUrl}}">
                            {{selectedCategory.title}}
                        </a>
                    </h1>
                    <div class="articles-sheet__actions">
                        <a class="button2"
                           ng-click="markAllAsRead()"
                           ng-class="{'button2--inactive': selectedCategory.unreadArticlesCount == 0}">
                            <svg class="button2__icon"
                                width="128px" height="128px" viewBox="0 0 128 128">
                                <path class="button2__icon-obj" d="m 53.137425,98.563519 c -1.31855,1.31855 -3.471404,1.31855 -4.797247,0 l -1.064758,-1.066217 0,0 -1.136229,-1.13477 -4.992695,-4.999988 c -0.02188,-0.02188 -0.01459,-0.04813 -0.02917,-0.06272 L 18.227937,68.241244 c -1.325843,-1.317092 -1.325843,-3.471404 0,-4.795789 l 7.195141,-7.202433 c 1.333136,-1.324385 3.478697,-1.324385 4.810374,0 L 50.765785,76.937256 93.948299,33.756201 c 1.317092,-1.325843 3.471404,-1.325843 4.797247,0 l 7.195144,7.202433 c 1.33167,1.325843 1.33167,3.471404 0,4.803082 z"/>
                            </svg>
                            mark everything here as read
                        </a>
                    </div>
                    <div ng-show="allTags.length > 0" class="articles-sheet__tag-filter">
                        Filter by tag:
                        <select ng-model="selectedTag"
                            ng-change="onTagSelected()"
                            ng-options="t.name for t in allTags">
                            <option value="">none</option>
                        </select>
                    </div>
                    <div class="clear"></div>
                </div>
                
                <div ng-if="presentedArticles.length == 0" class="articles-sheet__element  list-empty">
                    Nothing here.
                </div>
                
                <div ng-show="isPrevPage" class="articles-sheet__element">
                    <button class="pagination-button  pagination-button--prev" ng-click="prevPage()">Previous page <span class="pagination-button__unread-counter" ng-if="unreadBeforeThisPage > 0">{{unreadBeforeThisPage}} unread</span></button>
                </div>
                
                <articles-list></articles-list>
                
                <div ng-show="isNextPage" class="articles-sheet__element">
                    <button class="pagination-button  pagination-button--next" ng-click="nextPage()">Next page <span class="pagination-button__unread-counter" ng-if="unreadAfterThisPage > 0">{{unreadAfterThisPage}} unread</span></button>
                </div>
                
                <pick-tag-menu ng-if="showPickTagMenuData"></pick-tag-menu>
                
            </div>
            
            <div class="navigation-controls">
                <a class="button2" ng-click="scrollTo('prev')">
                    <svg class="button2__icon" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                        width="128px" height="128px" viewBox="0 0 128 128" enable-background="new 0 0 128 128" xml:space="preserve">
                    <path class="button2__icon-obj"
                        d="m 30.850122,89.215712 c -2.667209,2.637732 -6.979481,1.867078 -9.646681,-0.770654 -2.657826,-2.635052 -2.661842,-7.680466 0,-10.319537 L 59.717809,40.382778 c 2.663184,-2.636389 6.982152,-2.636389 9.646677,0 l 38.510344,37.741404 c 2.66453,2.64041 2.66453,7.681805 0,10.319537 -2.66318,2.637731 -6.97947,3.408385 -9.641311,0.771993 L 64.540478,58.264895 z"/>
                    </svg>
                </a>
                <a class="button2" ng-click="scrollTo('next')">
                    <svg class="button2__icon" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                        width="128px" height="128px" viewBox="0 0 128 128" enable-background="new 0 0 128 128" xml:space="preserve">
                    <path class="button2__icon-obj"
                        d="m 98.231673,40.040094 c 2.667207,-2.637732 6.979487,-1.867079 9.646677,0.770652 2.65783,2.635054 2.66185,7.680467 0,10.319539 L 69.363986,88.873026 c -2.663184,2.63639 -6.982153,2.63639 -9.646678,0 L 21.206959,51.131623 c -2.664525,-2.64041 -2.664525,-7.681805 0,-10.319537 2.663185,-2.637731 6.979474,-3.408384 9.641318,-0.771992 L 64.541318,70.99091 z"/>
                    </svg>
                </a>
            </div>
            
    </div>

</div>