<!-- Root view -->
<div id="settings-root-view">
    <div class="navbar">
        <div class="navbar-inner">
            <div class="center sliding"><%= scope.textSettings %></div>
            <div class="right"><% if (phone) { %><a href="#" class="link close-popup"><%= scope.textDone %></a><% } %></div>
        </div>
    </div>
    <div class="pages">
        <div class="page" data-page="settings-root-view">
            <div class="page-content">
                <div class="list-block">
                    <ul>
                        <% if (phone) { %>
                        <li>
                            <a id="settings-search" class="item-link no-indicator">
                                <div class="item-content">
                                    <div class="item-media">
                                        <i class="icon icon-search"></i>
                                    </div>
                                    <div class="item-inner">
                                        <div class="item-title"><%= scope.textFind %></div>
                                    </div>
                                </div>
                            </a>
                        </li>
                        <% } %>
                        <li>
                            <a id="settings-download" class="item-link">
                                <div class="item-content">
                                    <div class="item-media">
                                        <i class="icon icon-download"></i>
                                    </div>
                                    <div class="item-inner">
                                        <div class="item-title"><%= scope.textDownload %></div>
                                    </div>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a id="settings-document-info" class="item-link">
                                <div class="item-content">
                                    <div class="item-media">
                                        <i class="icon icon-info"></i>
                                    </div>
                                    <div class="item-inner">
                                        <div class="item-title"><%= scope.textDocInfo %></div>
                                    </div>
                                </div>
                            </a>
                        </li>
                        <!--<li>-->
                            <!--<a id="settings-history" class="item-link">-->
                                <!--<div class="item-content">-->
                                    <!--<div class="item-media">-->
                                        <!--<i class="icon icon-versions"></i>-->
                                    <!--</div>-->
                                    <!--<div class="item-inner">-->
                                        <!--<div class="item-title">Document History</div>-->
                                    <!--</div>-->
                                <!--</div>-->
                            <!--</a>-->
                        <!--</li>-->
                        <li>
                            <a id="settings-help" class="item-link">
                                <div class="item-content">
                                    <div class="item-media">
                                        <i class="icon icon-help"></i>
                                    </div>
                                    <div class="item-inner">
                                        <div class="item-title"><%= scope.textHelp %></div>
                                    </div>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a id="settings-about" class="item-link">
                                <div class="item-content">
                                    <div class="item-media">
                                        <i class="icon icon-about"></i>
                                    </div>
                                    <div class="item-inner">
                                        <div class="item-title"><%= scope.textAbout %></div>
                                    </div>
                                </div>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Document Info view -->
<div id="settings-info-view">
    <div class="navbar">
        <div class="navbar-inner">
            <div class="left sliding">
                <a href="#" class="back link">
                    <i class="icon icon-back"></i><% if (!android) { %><span><%= scope.textBack %></span><% } %>
                </a>
            </div>
            <div class="center sliding"><%= scope.textDocInfo %></div>
        </div>
    </div>
    <div class="pages">
        <div class="page" data-page="settings-info-view">
            <div class="page-content">
                <div class="content-block-title"><%= scope.textDocTitle %></div>
                <div class="list-block">
                    <ul>
                        <li class="item-content">
                            <div class="item-inner">
                                <div id="settings-document-title" class="item-title"><%= scope.textLoading %></div>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="content-block-title"><%= scope.textAuthor %></div>
                <div class="list-block">
                    <ul>
                        <li class="item-content">
                            <div class="item-inner">
                                <div id="settings-document-autor" class="item-title"><%= scope.textLoading %></div>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="content-block-title"><%= scope.textCreateDate %></div>
                <div class="list-block">
                    <ul>
                        <li class="item-content">
                            <div class="item-inner">
                                <div id="settings-document-date" class="item-title"><%= scope.textLoading %></div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Download view -->
<div id="settings-download-view">
    <div class="navbar">
        <div class="navbar-inner">
            <div class="left sliding">
                <a href="#" class="back link">
                    <i class="icon icon-back"></i><% if (!android) { %><span><%= scope.textBack %></span><% } %>
                </a>
            </div>
            <div class="center sliding"><%= scope.textDownload %></div>
        </div>
    </div>
    <div class="pages">
        <div class="page formats" data-page="settings-download-view">
            <div class="page-content">
                <div class="content-block-title"><%= scope.textDownloadAs %></div>
                <div class="list-block">
                    <ul>
                        <li>
                            <a data-format="<%= saveas.xlsx %>" class="item-link no-indicator">
                                <div class="item-content">
                                    <div class="item-media">
                                        <i class="icon icon-format-xlsx"></i>
                                    </div>
                                    <div class="item-inner">
                                        <div class="item-title">XLSX</div>
                                    </div>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a data-format="<%= saveas.pdf %>" class="item-link no-indicator">
                                <div class="item-content">
                                    <div class="item-media">
                                        <i class="icon icon-format-pdf"></i>
                                    </div>
                                    <div class="item-inner">
                                        <div class="item-title">PDF</div>
                                    </div>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a data-format="<%= saveas.ods %>" class="item-link no-indicator">
                                <div class="item-content">
                                    <div class="item-media">
                                        <i class="icon icon-format-ods"></i>
                                    </div>
                                    <div class="item-inner">
                                        <div class="item-title">ODS</div>
                                    </div>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a data-format="<%= saveas.csv %>" class="item-link no-indicator">
                                <div class="item-content">
                                    <div class="item-media">
                                        <i class="icon icon-format-csv"></i>
                                    </div>
                                    <div class="item-inner">
                                        <div class="item-title">CSV</div>
                                    </div>
                                </div>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- History view -->
<div id="settings-history-view">
    <div class="navbar">
        <div class="navbar-inner">
            <div class="left sliding">
                <a href="#" class="back link">
                    <i class="icon icon-back"></i><% if (!android) { %><span><%= scope.textBack %></span><% } %>
                </a>
            </div>
            <div class="center sliding">Version History</div>
        </div>
    </div>
    <div class="pages">
        <div class="page" data-page="settings-history-view">
            <div class="page-content">
                <div class="content-block-title">Saved versions</div>
                <div class="content-block inset">
                    <div class="content-block-inner">
                        <p>Under construction</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- About view -->
<div id="settings-about-view">
    <div class="navbar">
        <div class="navbar-inner">
            <div class="left sliding">
                <a href="#" class="back link">
                    <i class="icon icon-back"></i><% if (!android) { %><span><%= scope.textBack %></span><% } %>
                </a>
            </div>
            <div class="center sliding"><%= scope.textAbout %></div>
        </div>
    </div>
    <div class="pages">
        <div class="page about" data-page="settings-about-view">
            <div class="page-content">
                <div class="content-block">
                    <div class="logo" style="display: inline-block; width: 100%; height: 55px;"></div>
                    <div id="settings-about-logo" style="margin-top: 20px;display: none;"></div>
                </div>
                <div class="content-block">
                    <h3>SPREADSHEET EDITOR</h3>
                    <h3><%= scope.textVersion %> {{PRODUCT_VERSION}}</h3>
                </div>
                <div class="content-block">
                    <h3 id="settings-about-name" class="vendor">Ascensio System SIA</h3>
                    <p><label><%= scope.textAddress %>:</label><a id="settings-about-address" class="external" href="#">Lubanas st. 125a-25, Riga, Latvia, EU, LV-1021</a></p>
                    <p><label><%= scope.textEmail %>:</label><a id="settings-about-email" class="external" target="_blank" href="mailto:support@onlyoffice.com">support@onlyoffice.com</a></p>
                    <p><label><%= scope.textTel %>:</label><a id="settings-about-tel" class="external" target="_blank" href="tel:+371 660-16425">+371 660-16425</a></p>
                    <p><a id="settings-about-url" class="external" target="_blank" href="http://www.onlyoffice.com">www.onlyoffice.com</a></p>
                    <p><label id="settings-about-info" style="display: none;"></label></p>
                </div>
                <div class="content-block" id="settings-about-licensor" style="display: none;">
                    <div class="content-block-inner" style="padding-top:0; padding-bottom: 1px;"/>
                    <p><label><%= scope.textPoweredBy %></label></p>
                    <h3 class="vendor">Ascensio System SIA</h3>
                    <p><a class="external" target="_blank" href="http://www.onlyoffice.com">www.onlyoffice.com</a></p>
                </div>
            </div>
        </div>
    </div>
</div>