import QtQuick 2.0
import Sailfish.Silica 1.0
import "../common"
import "../js/DurationFormatter.js" as DurationFormatter

Page {
    id: searchPage

    SilicaListView {
        id: list

        property alias searchField: headerItem

        anchors.fill: parent
        currentIndex: -1

        header: SearchField {
            //id: searchField
            width: parent.width

            placeholderText: qsTr("Search")

            onTextChanged: {
                if (text)
                    genreModel.qxFetchByQuery_("where name LIKE '%" + text +"%'")
                else
                    genreModel.qxFetchAll_();
            }
        }

        model: genreModel

        delegate: ListItem {
            id: listItem

            Label {
                anchors {
                    left: parent.left
                    leftMargin: Theme.paddingLarge

                    right: parent.right
                    rightMargin: Theme.paddingLarge

                    verticalCenter: parent.verticalCenter
                }

                text: searchField.text ? Theme.highlightText(model.Name, searchField.text, Theme.highlightColor) : model.Name  //model.Name
                font.pixelSize: Theme.fontSizeMedium

                color: listItem.highlighted ? Theme.highlightColor : Theme.primaryColor
            }
        }

//        header: PageHeader {
//            id: header
//            title: qsTr("Genres")
//        }

        ViewPlaceholder {
            text: qsTr("No genres available.")
            enabled: list.count == 0
        }

        VerticalScrollDecorator {}
    }

//    Column {
//        id: headerBox
//        parent: list.headerItem ? list.headerItem : searchPage

//        anchors {
//            left: parent.left
//            right: parent.right
//        }

//        PageHeader {
//            title: qsTr("Search")
//        }


//    }

    RemorsePopup {
        id: remorse
    }
}