Merge branch 'merlin' into rafael

Conflicts: src/assets/images/icons/sprite.png

Merge branch 'merlin' into rafael
Conflicts: src/assets/images/icons/sprite.png
Leonardo Merlin
2 parents 082f347c c07e7c4b
Showing 112 changed files with 2453 additions and 2055 deletions Show diff stats
README.md
TROUBLESHOOTING.md
data.js
src/app/components/article-box/article-box.directive.js
src/app/components/article-box/article-box.html
src/app/components/article-grid/article-grid.directive.js
src/app/components/article-grid/article-grid.html
src/app/components/article-grid/article-grid.scss
src/app/components/article-preview/article-preview.directive.js
src/app/components/article-service/article.service.js
src/app/components/article-service/article.service.spec.js
src/app/components/auth-user/auth-user.directive.js
src/app/components/breadcrumb/breadcrumb.scss
src/app/components/breadcrumb/template.html
src/app/components/category-list/category-list.directive.js
src/app/components/dialoga-service/dialoga.service.js
src/app/components/event-list/event-list.html
src/app/components/event-list/event-list.scss
src/app/components/navbar/navbar.html
src/app/components/navbar/navbar.scss
 # Dialoga App
-Start development:
+Convenções:
+
+- Os *programas* são **topics**;
+- Os *temas* são **categories**;
+- Um *grupo de programas* é um **discussion** (um grupo de topics);
+- As *propostas* são **proposals**;
+
+
+Para iniciar o desenvolvimento:
 ```bash
 # dev with no proxy (local data)
-gulp serve
-json-server data.js -p 9000 -w data.js
+gulp serve && json-server data.js -p 9000 -w data.js
 # dev with proxy to hom server
 gulp serve --target="http://hom.login.dialoga.gov.br"
@@ -14,7 +21,7 @@ gulp serve --target=&quot;http://hom.login.dialoga.gov.br&quot;
 gulp serve --target="http://login.dialoga.gov.br"
 ```
-# Project Decisions
+##### Referências
 - [generator-gulp-angular](https://github.com/Swiip/generator-gulp-angular)
 - Angular
@@ -0,0 +1,7 @@
+- Erro com `lwip` ou `make: g++: Command not found`
+	- Solução:
+	1. Instalar dependências do g++: `sudo apt-get install build-essential g++`
+	2. Reinstalar o sprity:
+	  1. desinstalar: ``npm uninstall sprity``
+	  2. limpar cache: ``npm cache clear``
+	  3. instalar: ``npm install sprity``
 \ No newline at end of file
@@ -29,26 +29,22 @@ module.exports = function () {
           "id": 180,
           "slug": "saude",
           "image": null
-        },
-        {
+        }, {
           "name": "Segurança Pública",
           "id": 182,
           "slug": "seguranca-publica",
           "image": null
-        },
-        {
+        }, {
           "name": "Educação",
           "id": 181,
           "slug": "educacao",
           "image": null
-        },
-        {
+        }, {
           "name": "Redução da Pobreza",
           "id": 183,
           "slug": "reducao-da-pobreza",
           "image": null
-        },
-        {
+        }, {
           "name": "Cultura",
           "id": 194,
           "slug": "cultura",
@@ -91,8 +87,7 @@ module.exports = function () {
             "allow_members_to_edit": false
           },
           "position": 14
-        },
-        {
+        }, {
           "id": 103521,
           "abstract": "<p>Mais atendimento nos municípios, mais saúde para quem mais precisa.</p>",
           "title": "Mais Médicos",
@@ -115,8 +110,7 @@ module.exports = function () {
             "allow_members_to_edit": false
           },
           "position": 1
-        },
-        {
+        }, {
           "id": 103457,
           "abstract": "<p>Ação conjunta e cooperação transfronteiriça.</p>",
           "title": "Proteção das Fronteiras",
@@ -139,8 +133,7 @@ module.exports = function () {
             "allow_members_to_edit": false
           },
           "position": 15
-        },
-        {
+        }, {
           "id": 103612,
           "abstract": "<p>Garantir água para beber e produzir.</p>",
           "title": "Cisternas",
@@ -163,8 +156,7 @@ module.exports = function () {
             "allow_members_to_edit": false
           },
           "position": 20
-        },
-        {
+        }, {
           "id": 103442,
           "abstract": "<p>Complemento à renda e acompanhamento em educação e saúde.</p>",
           "title": "Bolsa Família",
@@ -187,8 +179,7 @@ module.exports = function () {
             "allow_members_to_edit": false
           },
           "position": 17
-        },
-        {
+        }, {
           "id": 103673,
           "abstract": "<p>A melhor escolha é se informar.</p>",
           "title": "Incentivo ao Parto Normal",
@@ -211,8 +202,7 @@ module.exports = function () {
             "allow_members_to_edit": false
           },
           "position": 6
-        },
-        {
+        }, {
           "id": 103397,
           "abstract": "<p>Renda, inclusão produtiva e acesso a serviços.</p>",
           "title": "Brasil Sem Miséria",
@@ -235,8 +225,7 @@ module.exports = function () {
             "allow_members_to_edit": false
           },
           "position": 18
-        },
-        {
+        }, {
           "id": 121505,
           "abstract": "<p>Um novo jeito de ver e de fazer cultura</p>",
           "title": "Agenda Seculo XXI",
@@ -259,8 +248,7 @@ module.exports = function () {
             "author_name": "leonardo.merlin"
           },
           "position": null
-        },
-        {
+        }, {
           "id": 121526,
           "abstract": "<p>Cultura e arte como base para a educação integral</p>",
           "title": "Cultura e Educação",
@@ -283,8 +271,7 @@ module.exports = function () {
             "author_name": "leonardo.merlin"
           },
           "position": null
-        },
-        {
+        }, {
           "id": 103485,
           "abstract": "<p>Caminho para uma educação de qualidade.</p>",
           "title": "Valorização dos Professores",
@@ -307,8 +294,7 @@ module.exports = function () {
             "allow_members_to_edit": false
           },
           "position": 11
-        },
-        {
+        }, {
           "id": 103663,
           "abstract": "<p>Mais educação profissional e tecnológica, mais desenvolvimento</p>",
           "title": "Ensino Técnico",
@@ -331,8 +317,7 @@ module.exports = function () {
             "allow_members_to_edit": false
           },
           "position": 10
-        },
-        {
+        }, {
           "id": 121514,
           "abstract": "<p>Reconhecimento, fortalecimento e mobilização das comunidades que fazem cultura no Brasil</p>",
           "title": "Cultura Viva",
@@ -355,8 +340,7 @@ module.exports = function () {
             "author_name": "leonardo.merlin"
           },
           "position": null
-        },
-        {
+        }, {
           "id": 103592,
           "abstract": "<p>Garantir acesso à proteção social.</p>",
           "title": "Assistência Social",
@@ -379,8 +363,7 @@ module.exports = function () {
             "allow_members_to_edit": false
           },
           "position": 19
-        },
-        {
+        }, {
           "id": 103426,
           "abstract": "<p>Da saúde se cuida todos os dias.</p>",
           "title": "Vida saudável",
@@ -403,8 +386,7 @@ module.exports = function () {
             "allow_members_to_edit": false
           },
           "position": 7
-        },
-        {
+        }, {
           "id": 103507,
           "abstract": "<p>Tecnologia a serviço da segurança do cidadão.</p>",
           "title": "Sinesp",
@@ -427,8 +409,7 @@ module.exports = function () {
             "allow_members_to_edit": false
           },
           "position": 12
-        },
-        {
+        }, {
           "id": 103359,
           "abstract": "<p>Acesso a exames e consultas com especialistas.</p>",
           "title": "Mais Especialidades",
@@ -451,8 +432,7 @@ module.exports = function () {
             "allow_members_to_edit": false
           },
           "position": 2
-        },
-        {
+        }, {
           "id": 103683,
           "abstract": "<p>Saúde não tem preço.</p>",
           "title": "Aqui tem Farmácia Popular",
@@ -475,8 +455,7 @@ module.exports = function () {
             "allow_members_to_edit": false
           },
           "position": 5
-        },
-        {
+        }, {
           "id": 103695,
           "abstract": "<p>Novo modelo de atuação em Segurança Pública.</p>",
           "title": "Segurança Pública Integrada",
@@ -499,8 +478,7 @@ module.exports = function () {
             "allow_members_to_edit": false
           },
           "position": 13
-        },
-        {
+        }, {
           "id": 103379,
           "abstract": "<p>Resgate e atendimento 24 horas, sete dias da semana.</p>",
           "title": "SAMU 192 e UPAs",
@@ -523,8 +501,7 @@ module.exports = function () {
             "allow_members_to_edit": false
           },
           "position": 4
-        },
-        {
+        }, {
           "id": 103494,
           "abstract": "<p>Da Educação Infantil ao Ensino Médio.</p>",
           "title": "Educação Básica",
@@ -547,8 +524,7 @@ module.exports = function () {
             "allow_members_to_edit": false
           },
           "position": 8
-        },
-        {
+        }, {
           "id": 103644,
           "abstract": "<p>Um caminho de oportunidades com o Enem: Sisu, Prouni, Fies, Ciência sem Fronteiras</p>",
           "title": "Ensino Superior",
@@ -571,8 +547,7 @@ module.exports = function () {
             "allow_members_to_edit": false
           },
           "position": 9
-        },
-        {
+        }, {
           "id": 121499,
           "abstract": "<p>Valorização da arte e da cultura em suas múltiplas possibilidades</p>",
           "title": "Política Nacional das Artes",
@@ -595,8 +570,7 @@ module.exports = function () {
             "author_name": "leonardo.merlin"
           },
           "position": null
-        },
-        {
+        }, {
           "id": 103472,
           "abstract": "<p>Polícia Federal, Polícia Rodoviária Federal e Força Nacional de Segurança Pública.</p>",
           "title": "Forças Federais de Segurança",
@@ -619,8 +593,7 @@ module.exports = function () {
             "allow_members_to_edit": false
           },
           "position": 16
-        },
-        {
+        }, {
           "id": 121492,
           "abstract": "<p>Apoio ao audiovisual brasileiro: ampliação da produção, da difusão e do acesso</p>",
           "title": "Brasil de Todas as Telas",
@@ -643,8 +616,7 @@ module.exports = function () {
             "author_name": "leonardo.merlin"
           },
           "position": null
-        },
-        {
+        }, {
           "id": 121521,
           "abstract": "<p>Mais acesso a cultura para trabalhadores e trabalhadoras</p>",
           "title": "Vale-Cultura",
@@ -667,8 +639,7 @@ module.exports = function () {
             "author_name": "leonardo.merlin"
           },
           "position": null
-        },
-        {
+        }, {
           "id": 103416,
           "abstract": "<p>Estrutura adequada para atender melhor a população na atenção básica.</p>",
           "title": "Melhorar os Postos de Saúde",
@@ -691,8 +662,7 @@ module.exports = function () {
             "allow_members_to_edit": false
           },
           "position": 3
-        },
-        {
+        }, {
           "id": 121501,
           "abstract": "<p>Preservação do patrimônio e qualidade de vida para os cidadãos</p>",
           "title": "PAC Cidades Históricas",
@@ -734,5 +704,149 @@ module.exports = function () {
     "article":{"id":121521,"body":"\u003Cdiv class=\"col-xs-12\"\u003E\r\n\u003Cdiv class=\"row\"\u003E\r\n\u003Cdiv class=\"col-md-12\"\u003E\r\n\u003Ch2\u003EVale-Cultura\u003Csmall\u003EMais acesso \u00e0 cultura para trabalhadores e trabalhadoras\u003C/small\u003E\u003C/h2\u003E\r\n\u003C/div\u003E\r\n\u003C/div\u003E\r\n\u003Cdiv class=\"row\"\u003E\r\n\u003Cdiv class=\"col-md-12\"\u003E\r\n\u003Ch3\u003ELivros, shows e espet\u00e1culos para todos.\u003C/h3\u003E\r\n\u003C/div\u003E\r\n\u003C/div\u003E\r\n\u003Cdiv class=\"row\"\u003E\r\n\u003Cdiv class=\"col-md-6 col-sm-6 vcenter\"\u003E\u003Cimg class=\"img-responsive\" src=\"http://gestao.dialoga.gov.br/dialoga/dialoga-brasil/vale-cultura/imagens/vale-cultura1.jpg\" alt=\"\" /\u003E\u003C/div\u003E\r\n\u003Cdiv class=\"col-md-6 col-sm-6 vcenter\"\u003E\r\n\u003Cp\u003EO Vale-Cultura incentiva as empresas a oferecer aos seus funcion\u00e1rios acesso a livros, revistas, ingressos para cinemas, teatros, shows, instrumentos musicais e cursos de arte e cultura.\u003C/p\u003E\r\n\u003Cp\u003EO benef\u00edcio \u00e9 garantido por meio de um cart\u00e3o magn\u00e9tico pr\u00e9-pago, v\u00e1lido em todo os pa\u00eds. Mensalmente, esse cart\u00e3o recebe cr\u00e9dito de R$ 50, que pode ser acumulado para despesas maiores.\u003C/p\u003E\r\n\u003Cp\u003EA ades\u00e3o das empresas \u00e9 facultativa e os custos s\u00e3o livres de encargos sociais e trabalhistas. Aquelas que t\u00eam lucro real podem deduzir at\u00e9 1% do Imposto de Renda devido.\u003C/p\u003E\r\n\u003C/div\u003E\r\n\u003C/div\u003E\r\n\u003Cbr /\u003E\r\n\u003Cdiv class=\"row\"\u003E\r\n\u003Cdiv class=\"col-md-6 col-sm-6 vcenter\"\u003E\r\n\u003Cblockquote\u003E\r\n\u003Cp class=\"text-center\"\u003EEm pouco mais de um ano, o Vale-Cultura j\u00e1 mobiliza mais de R$140 milh\u00f5es e beneficia cerca de 420 mil trabalhadores e trabalhadoras.\u003C/p\u003E\r\n\u003C/blockquote\u003E\r\n\u003C/div\u003E\r\n\u003Cdiv class=\"col-md-6 col-sm-6 vcenter\"\u003E\r\n\u003Cdiv class=\"embed-responsive embed-responsive-16by9\"\u003E\u003Ciframe src=\"https://www.youtube.com/embed/KKmZh5T46g8?rel=0\" frameborder=\"0\" width=\"560\" height=\"315\"\u003E\u003C/iframe\u003E\u003C/div\u003E\r\n\u003C/div\u003E\r\n\u003C/div\u003E\r\n\u003Cdiv class=\"row\"\u003E\r\n\u003Cdiv class=\"col-md-12\"\u003E\r\n\u003Ch3\u003ECompromissos\u003C/h3\u003E\r\n\u003C/div\u003E\r\n\u003C/div\u003E\r\n\u003Cdiv class=\"row\"\u003E\r\n\u003Cdiv class=\"col-md-6 col-sm-6 vcenter\"\u003E\u003Cimg class=\"img-responsive\" src=\"http://gestao.dialoga.gov.br/dialoga/dialoga-brasil/vale-cultura/imagens/vale-cultura3.jpg\" alt=\"\" /\u003E\u003C/div\u003E\r\n\u003Cdiv class=\"col-md-6 col-sm-6 vcenter\"\u003E\r\n\u003Cul class=\"list-unstyled\"\u003E\r\n\u003Cli class=\"bullet\"\u003E\u003Cstrong\u003EAmpliar a ades\u00e3o de empresas e trabalhadores\u003C/strong\u003E\u003C/li\u003E\r\n\u003Cli class=\"bullet\"\u003E\u003Cstrong\u003EAmpliar a rede de estabelecimentos que recebem o Vale-Cultura.\u003C/strong\u003E\u003C/li\u003E\r\n\u003C/ul\u003E\r\n\u003C/div\u003E\r\n\u003C/div\u003E\r\n\u003C/div\u003E"}
   });
+
+  // Random topics / Programas aleatorios - 1 por tema
+  // path: /api/v1/dialoga_plugin/random_topics/103358
+  // Like: http://hom.dialoga.gov.br/api/v1/dialoga_plugin/random_topics/103358
+  // ?fields[]=id&fields[]=title&fields[]=slug&fields[]=abstract&fields[]=body&fields[]=categories&fields[]=setting&fields[]=ranking_position&fields[]=position&fields[]=children_count&fields[]=hits&fields[]=votes_for&fields[]=votes_against&fields[]=tag_list
+  data.dialoga_plugin = {
+    "articles": [
+      {
+        "ranking_position": null,
+        "id": 116089,
+        "body": "<div class=\"container\">\r\n<div class=\"row\">\r\n<div class=\"col-md-12\">\r\n<h2>Cultura e Educação<small>Cultura e arte como base para a educação integral.</small></h2>\r\n</div>\r\n</div>\r\n<div class=\"row\">\r\n<div class=\"col-md-12\"><img class=\"img-responsive center-block\" src=\"http://hom.gestao.dialoga.gov.br/dialoga/dialoga-brasil/cultura-e-educacao/imagens/cultura-educacao-imagem1.jpg\" alt=\"\" /></div>\r\n</div>\r\n<br />\r\n<div class=\"row\">\r\n<div class=\"col-md-12\">\r\n<p>A aproximação entre cultura e educação é estratégica para o desenvolvimento cultural do país e para a qualificação da educação brasileira.</p>\r\n<p> </p>\r\n<h3>Mais Cultura nas Escolas promove ensino com criatividade</h3>\r\n</div>\r\n</div>\r\n<div class=\"row\">\r\n<div class=\"col-md-6 col-sm-6\">\r\n<p>É mais fácil aprender quando as abordagens pedagógicas são criativas e têm relação com a realidade cultural das crianças e jovens. Com o Mais Cultura nas Escolas, o ensino de crianças, adolescentes e jovens vincula-se às experiências culturais e artísticas das comunidades em que vivem.</p>\r\n<blockquote>\r\n<p class=\"text-center\">São priorizadas as escolas que têm maior número de estudantes beneficiários do Bolsa Família</p>\r\n</blockquote>\r\n<img class=\"img-responsive center-block\" style=\"width: 100%;\" src=\"http://hom.gestao.dialoga.gov.br/dialoga/dialoga-brasil/cultura-e-educacao/imagens/cultura-educacao-imagem3.jpg\" alt=\"Imagem de Vídeo\" /></div>\r\n<div class=\"col-md-6 col-sm-6\"><img class=\"img-responsive center-block\" src=\"http://hom.gestao.dialoga.gov.br/dialoga/dialoga-brasil/cultura-e-educacao/imagens/cultura-educacao-imagem2.jpg\" alt=\"Conexão Felipe Camarão\" /> <br /> <img class=\"img-responsive center-block\" src=\"http://hom.gestao.dialoga.gov.br/dialoga/dialoga-brasil/cultura-e-educacao/imagens/cultura-educacao-imagem4.jpg\" alt=\"Programa mais cultura nas escolas\" /></div>\r\n</div>\r\n</div>\r\n<div class=\"container\">\r\n<div class=\"row\">\r\n<div class=\"col-md-12\">\r\n<h3>União dos saberes científicos e populares</h3>\r\n</div>\r\n</div>\r\n<div class=\"row\">\r\n<div class=\"col-md-4 col-sm-4\"><img class=\"img-responsive center-block\" src=\"http://hom.gestao.dialoga.gov.br/dialoga/dialoga-brasil/cultura-e-educacao/imagens/cultura-educacao-imagem5.jpg\" alt=\"\" /></div>\r\n<div class=\"col-md-8 col-sm-8\">\r\n<p>O Programa Mais Cultura nas Universidades utiliza os <em>campi</em> e os institutos federais de ensino como centros irradiadores de produção artística e cultural para as comunidades. São realizadas ações de extensão, pesquisa e inovação em conjunto com grupos artísticos locais.</p>\r\n<p>Um total de 28 universidades e institutos federais foram apoiados diretamente pelo programa e outras 73 instituições federais já apresentaram planos de cultura.</p>\r\n</div>\r\n</div>\r\n</div>\r\n<div class=\"container\">\r\n<div class=\"row\">\r\n<div class=\"col-md-12\">\r\n<h3>Pronatec Cultura fomenta a economia e amplia a renda</h3>\r\n</div>\r\n</div>\r\n<div class=\"row\">\r\n<div class=\"col-md-6 col-sm-6\">\r\n<p>O Pronatec Cultura oferece qualificação profissional que fortalece as cadeias produtivas da cultura, promovendo a formalização do setor, inclusão profissional e aumento da renda.</p>\r\n<p>Está presente em 228 municípios de 19 estados brasileiros, com 7.702 pessoas formadas até o primeiro semestre de 2015.</p>\r\n<blockquote>\r\n<p class=\"text-center\">São 65 cursos de formação como fotógrafo, vitrinista, iluminador cênico, sonoplasta, ilustrador e assistente de produção, ofertados pelos Institutos Federais, Sistema S e escolas profissionalizantes</p>\r\n</blockquote>\r\n</div>\r\n<div class=\"col-md-6 col-sm-6\"><img class=\"img-responsive center-block\" src=\"http://hom.gestao.dialoga.gov.br/dialoga/dialoga-brasil/cultura-e-educacao/imagens/cultura-educacao-imagem6.jpg\" alt=\"\" /></div>\r\n</div>\r\n</div>",
+        "abstract": "<p>Cultura e arte como base para a educação integral</p>",
+        "title": "Cultura e Educação",
+        "categories": [
+          {
+            "name": "Cultura",
+            "id": 194,
+            "slug": "cultura"
+          }
+        ],
+        "votes_for": 0,
+        "votes_against": 0,
+        "setting": {
+          "color": "",
+          "allow_members_to_edit": false,
+          "moderate_comments": false,
+          "comment_paragraph_plugin_activate": false,
+          "author_name": "Admin DEDES"
+        },
+        "position": null,
+        "hits": 17,
+        "tag_list": [],
+        "children_count": 2,
+        "slug": "cultura-e-educacao"
+      }, {
+        "ranking_position": null,
+        "id": 103644,
+        "body": "<div class=\"container\">\r\n<div class=\"row\">\r\n<div class=\"col-md-12\">\r\n<h2>Ensino Superior<small>Um caminho de oportunidades com o Enem: Sisu, Prouni, Fies, Ciência sem Fronteiras</small></h2>\r\n</div>\r\n</div>\r\n<div class=\"row\">\r\n<div class=\"col-md-12\">\r\n<h3>Enem - Exame Nacional do Ensino Médio</h3>\r\n</div>\r\n</div>\r\n<div class=\"row\">\r\n<div class=\"col-md-6 col-sm-6\">\r\n<p>O Exame Nacional do Ensino Médio (Enem) abre portas para que todos os brasileiros trilhem, em igualdade de condições e de acordo com seus méritos como estudantes, um <strong>caminho de oportunidades</strong> por meio dos ensinos técnico e superior.</p>\r\n<br />\r\n<h4>Cada vez mais estudantes realizam o Enem</h4>\r\n<p>Na edição de 2014, o Enem teve quase <strong>9 milhões de inscritos e se consolidou como o maior exame deste tipo no Brasil e o segundo maior no mundo.</strong></p>\r\n<blockquote>\r\n<p class=\"text-center\">Com o Enem, várias possibilidades se abrem para o estudante, de acordo com o seu desempenho nos exames.</p>\r\n</blockquote>\r\n</div>\r\n<div class=\"col-md-6 col-sm-6\"><img class=\"img-responsive center-block\" src=\"http://dialoga.gov.br/dialoga/dialoga-brasil/ensino-superior/imagens/foto-1.jpg\" alt=\"\" width=\"375\" height=\"417\" /></div>\r\n</div>\r\n</div>\r\n<div class=\"container\">\r\n<div class=\"row\">\r\n<div class=\"col-md-12\"><img class=\"img-responsive center-block\" src=\"http://dialoga.gov.br/dialoga/dialoga-brasil/ensino-superior/imagens/infografico-1.jpg\" alt=\"\" width=\"305\" height=\"269\" /></div>\r\n</div>\r\n</div>\r\n<div class=\"container\">\r\n<div class=\"row\">\r\n<div class=\"col-md-12\">\r\n<h3>SISU - Sistema de Seleção Unificada</h3>\r\n</div>\r\n</div>\r\n<div class=\"row\">\r\n<div class=\"col-md-12\">\r\n<p>Em outros tempos, o jovem que quisesse ingressar no ensino superior fazia inscrição no vestibular para um único curso de uma única universidade. Apenas estudantes com melhores condições financeiras podiam se inscrever em mais instituições e em diferentes locais do país.</p>\r\n<p>Hoje, com o SISU, a realidade é outra. O jovem, independentemente de sua condição social, usando a nota de um único exame – o Enem, feito em um único local e em uma mesma data, tem direito de disputar <strong>milhares de vagas, em vários cursos</strong> das melhores Instituições públicas e privadas de ensino superior, de todo o país.</p>\r\n<p>Durante o período de inscrição, o aluno pode acompanhar diariamente, pela internet, como está a procura pelos cursos do seu interesse, para alinhar suas escolhas e seus planos de estudo com a nota que obteve no Enem.</p>\r\n</div>\r\n</div>\r\n<div class=\"row\">\r\n<div class=\"col-md-12\"><img class=\"img-responsive center-block\" src=\"http://dialoga.gov.br/dialoga/dialoga-brasil/ensino-superior/imagens/infografico-2.jpg\" alt=\"\" width=\"546\" height=\"293\" /></div>\r\n</div>\r\n</div>\r\n<div class=\"container\">\r\n<div class=\"row\">\r\n<div class=\"col-md-12\">\r\n<h3>PROUNI: Universidade para Todos</h3>\r\n</div>\r\n</div>\r\n<div class=\"row\">\r\n<div class=\"col-md-6 col-sm-6\"><img class=\"img-responsive center-block\" src=\"http://dialoga.gov.br/dialoga/dialoga-brasil/ensino-superior/imagens/enem-imagem4.jpg\" alt=\"\" /></div>\r\n<div class=\"col-md-6 col-sm-6\">\r\n<p>O Programa Universidade para Todos (Prouni) foi criado em 2004 para ampliar e democratizar o acesso de estudantes de baixa renda ao ensino superior no Brasil.</p>\r\n<p>O Prouni concede bolsas integrais e parciais de 50% em instituições privadas de ensino superior para estudantes que ainda não têm um diploma de nível superior. O programa já totaliza mais de 1,69 milhão de bolsas concedidas, desde a sua criação, em 2004.</p>\r\n<p>Para concorrer a uma das bolsas, o aluno tem que ter no mínimo 450 pontos no Enem, não ter tirado zero na redação, ter cursado todo o ensino médio em escola pública ou como bolsista integral em escola particular. A renda bruta da família também é considerada no acesso às bolsas: deve ser menor que 1 ½ salário mínimo por pessoa para bolsa integral e menor que 3 salários mínimos por pessoa para bolsa de 50%.</p>\r\n</div>\r\n</div>\r\n</div>\r\n<div class=\"container\">\r\n<div class=\"row\">\r\n<div class=\"col-md-12\">\r\n<h3>FIES: Fundo de Financiamento Estudantil para acesso ao ensino superior</h3>\r\n</div>\r\n</div>\r\n<div class=\"row\">\r\n<div class=\"col-md-6 col-sm-6\"><img class=\"img-responsive center-block\" src=\"http://dialoga.gov.br/dialoga/dialoga-brasil/ensino-superior/imagens//infografico-3.jpg\" alt=\"\" width=\"281\" height=\"234\" /></div>\r\n<div class=\"col-md-6 col-sm-6\">\r\n<p>Com quase 2 milhões de contratos firmados e 1.770 instituições participantes, o Fies se tornou um importante instrumento para quem pretende ingressar em uma instituição privada de ensino superior.</p>\r\n<p>As adequações pelas quais o Fies está passando garantem a sua sustentabilidade, asseguram a qualidade dos cursos financiados e beneficiam diretamente o estudante que realmente precisa do financiamento. Nenhum estudante que participa do Fies deixará de receber o benefício e o governo vai zelar pelo bom funcionamento do programa.</p>\r\n</div>\r\n</div>\r\n</div>\r\n<div class=\"container\">\r\n<div class=\"row\">\r\n<div class=\"col-md-12\">\r\n<h3>SISUTEC: mais opções para crescer</h3>\r\n</div>\r\n</div>\r\n<div class=\"row\">\r\n<div class=\"col-md-12\">\r\n<p>Criado em 2013, o Sistema de Seleção Unificada da Educação Profissional e Tecnológica é mais uma opção para o estudante que faz o Enem. O Sisutec faz parte do Programa Nacional de Acesso ao Ensino Técnico e Emprego (Pronatec) e oferece vagas gratuitas em cursos técnicos.</p>\r\n</div>\r\n</div>\r\n</div>\r\n<div class=\"container\">\r\n<div class=\"row\">\r\n<div class=\"col-md-12\">\r\n<h3>Ciência sem Fronteiras:<br />conhecimento avançado no exterior</h3>\r\n</div>\r\n</div>\r\n<div class=\"row\">\r\n<div class=\"col-md-6 col-sm-6\">\r\n<p>O Ciência sem Fronteiras proporciona aos estudantes brasileiros de graduação e de pós-graduação oportunidades de intercâmbio internacional, para estudar e pesquisar nas melhores universidades do mundo.</p>\r\n<p>Podem participar alunos de instituições públicas ou particulares de todo o país em áreas essenciais para o  desenvolvimento científico e tecnológico.</p>\r\n<p>Na primeira fase do programa, mais de 100 mil estudantes se beneficiaram dessa importante oportunidade. Em breve novos editais serão publicados, com a abertura de novas vagas.</p>\r\n</div>\r\n<div class=\"col-md-6 col-sm-6\"><img class=\"img-responsive center-block\" src=\"http://dialoga.gov.br/dialoga/dialoga-brasil/ensino-superior/imagens/infografico-4.jpg\" alt=\"\" width=\"226\" height=\"191\" /></div>\r\n</div>\r\n</div>\r\n<div class=\"container\">\r\n<div class=\"row\">\r\n<div class=\"col-md-12\">\r\n<h3>Lei das Cotas</h3>\r\n</div>\r\n</div>\r\n<div class=\"row\">\r\n<div class=\"col-md-12\">\r\n<p>Todas as universidades públicas federais e os institutos federais de tecnologia reservam uma parte das suas vagas para alunos que estudaram em escolas públicas. Desde 2012, as cotas estão sendo implantadas gradualmente, até atingir, em 2016, a metade das vagas existentes.</p>\r\n<p>Das vagas reservadas para egressos de escolas públicas, metade é destinada a estudantes de famílias com renda mensal de até um salario mínimo e meio.</p>\r\n<p>O preenchimento destas vagas também leva em conta critérios de cor ou raça de acordo com as estatísticas do IBGE para cada estado.</p>\r\n<p>Após dois anos da implantação de Lei das Cotas (Lei nº 12.711, de 29 de agosto de 2012), em 2014, todos os institutos federais atenderam ao percentual mínimo de 25%, previsto para aquele ano; 85% atingiram a meta de 2015; 78% já atingiram a meta prevista para 2016 - 50% das vagas.</p>\r\n<p>No caso das Universidades Federais, todas atenderam, em 2014, ao percentual mínimo previsto de 25%; 64% atingiram antecipadamente a meta de 2015; 56% atingiram, com antecedência, a meta prevista para 2016.</p>\r\n<p>Em 2014, nos institutos federais, 23% das vagas foram reservadas para pretos, pardos e indígenas e, nas Universidades Federais, foram 20%.</p>\r\n</div>\r\n<div class=\"col-md-12\"><img class=\"img-responsive center-block\" src=\"http://dialoga.gov.br/dialoga/dialoga-brasil/ensino-superior/imagens/infografico-5.jpg\" alt=\"\" width=\"749\" height=\"223\" /></div>\r\n</div>\r\n</div>",
+        "abstract": "<p>Um caminho de oportunidades com o Enem: Sisu, Prouni, Fies, Ciência sem Fronteiras</p>",
+        "title": "Ensino Superior",
+        "categories": [
+          {
+            "name": "Educação",
+            "id": 181,
+            "slug": "educacao"
+          }
+        ],
+        "votes_for": 0,
+        "votes_against": 0,
+        "setting": {
+          "color": "#cfe2f3",
+          "moderate_comments": false,
+          "comment_paragraph_plugin_activate": false,
+          "author_name": "Ronald Emerson Scherolt da Costa",
+          "allow_members_to_edit": false
+        },
+        "position": 9,
+        "hits": 54,
+        "tag_list": [],
+        "children_count": 7,
+        "slug": "ensino-superior"
+      }, {
+        "ranking_position": null,
+        "id": 103442,
+        "body": "<div class=\"container\">\r\n<div class=\"row\">\r\n<div class=\"col-md-12\">\r\n<h2>Bolsa Família <small>Complemento à renda e acompanhamento em educação e saúde.</small></h2>\r\n</div>\r\n</div>\r\n<div class=\"row\">\r\n<div class=\"col-md-12\"><img class=\"img-responsive center-block\" src=\"http://dialoga.gov.br/dialoga/dialoga-brasil/bolsa-familia/imagens/educacao-bolsa-familia-imagem1.png\" alt=\"\" width=\"748\" height=\"280\" /></div>\r\n<div class=\"col-md-12\"><br />\r\n<p>O Bolsa Família é um programa que complementa mensalmente a renda de 14 milhões de famílias pobres, garante que crianças e adolescentes permaneçam na escola e acompanha a saúde de crianças, de mulheres grávidas e daquelas que estão amamentando.</p>\r\n</div>\r\n</div>\r\n</div>\r\n<div class=\"container\">\r\n<div class=\"row\">\r\n<div class=\"col-md-6 col-sm-6\">\r\n<h3>Educação no Bolsa Família</h3>\r\n<p>Na educação, o Bolsa Família faz o acompanhamento mensal da frequência escolar de 17 milhões de crianças e adolescentes de famílias de baixa renda. Também ajuda a identificar dificuldades de acesso e de permanência dos estudantes na escola.</p>\r\n</div>\r\n<div class=\"col-md-6 col-sm-6\"><img class=\"img-responsive center-block\" src=\"http://dialoga.gov.br/dialoga/dialoga-brasil/bolsa-familia/imagens/educacao-bolsa-familia-imagem2.jpg\" alt=\"\" /></div>\r\n</div>\r\n</div>\r\n<div class=\"container\">\r\n<div class=\"row\">\r\n<div class=\"col-md-12\"><img class=\"img-responsive center-block\" src=\"http://dialoga.gov.br/dialoga/dialoga-brasil/bolsa-familia/imagens/educacao-bolsa-familia-imagem3.png\" alt=\"\" /></div>\r\n</div>\r\n</div>\r\n<div class=\"container\">\r\n<div class=\"row\">\r\n<div class=\"col-md-6 col-sm-6\"><img class=\"img-responsive center-block\" src=\"http://dialoga.gov.br/dialoga/dialoga-brasil/bolsa-familia/imagens/educacao-bolsa-familia-imagem4.png\" alt=\"\" /></div>\r\n<div class=\"col-md-6 col-sm-6\">\r\n<h3>Saúde no Bolsa Família</h3>\r\n<p>Na saúde, o Programa monitora a vacinação, o peso e a altura das crianças com menos de 7 anos. Também faz o acompanhamento do pré-natal das gestantes e orienta as mulheres em fase de amamentação.</p>\r\n<p>Mais de 9 milhões de famílias são atendidas na área da saúde pelo Bolsa Família e os efeitos do acompanhamento são percebidos na vida das pessoas, na comprovada redução da mortalidade infantil e no crescimento saudável das crianças.</p>\r\n</div>\r\n</div>\r\n</div>\r\n<div class=\"container\">\r\n<div class=\"row\">\r\n<div class=\"col-md-6 col-sm-6\">\r\n<h3>Redução de quase 1 cm do déficit de altura das crianças de 5 anos do Bolsa Família</h3>\r\n<img class=\"img-responsive center-block\" src=\"http://dialoga.gov.br/dialoga/dialoga-brasil/bolsa-familia/imagens/educacao-bolsa-familia-imagem5.jpg\" alt=\"\" /></div>\r\n<div class=\"col-md-6 col-sm-6\"> </div>\r\n</div>\r\n</div>\r\n<div class=\"container\">\r\n<div class=\"row\">\r\n<div class=\"col-md-12 col-sm-12\">\r\n<h3>As crianças estão mais saudáveis e altas</h3>\r\n<p>Com a redução da desnutrição crônica, o déficit de estatura entre as crianças do Bolsa Família diminui 51%, o equivalente a quase 1 centímetro. A queda foi verificada em pesquisa que acompanhou 360 mil crianças beneficiadas ao longo de cinco anos seguidos, em que foram medidas e pesadas.</p>\r\n<p> </p>\r\n<h3>Cadastro Único para acessar políticas públicas</h3>\r\n</div>\r\n<div class=\"col-md-12 col-sm-12\">\r\n<p>Para participar do Programa, a família faz um cadastro com informações sobre moradia, renda, escolaridade e condições de vida. Este é o Cadastro Único para Programas Sociais do Governo Federal, um mapa social que permite aos governos planejarem suas ações, a partir da identificação das necessidades básicas das famílias.</p>\r\n<p>A orientação e o encaminhamento das famílias são feitos pela rede de assistência social para que os beneficiários do Bolsa Família acessem também outros programas como o <strong>Pronatec, o </strong><strong>Luz para Todos e o</strong><strong> Minha Casa</strong>, <strong>Minha Vida</strong>.</p>\r\n</div>\r\n</div>\r\n</div>\r\n<div class=\"container\">\r\n<div class=\"row\">\r\n<div class=\"col-md-12 col-sm-12\">\r\n<h3>Quem recebe o Bolsa Família</h3>\r\n</div>\r\n<div class=\"col-md-12 col-sm-12\">\r\n<p>Podem participar as famílias registradas no Cadastro Único, desde que:</p>\r\n<ul class=\"list-styled\">\r\n<li>Com renda mensal, por pessoa, de até R$ 77, mesmo que não tenham gestantes, crianças ou adolescentes;</li>\r\n<li>Com renda mensal, por pessoa, de até R$ 154, que tenham gestantes, crianças ou adolescentes na família.</li>\r\n</ul>\r\n<p>O valor repassado depende do <strong>tamanho da família</strong>, da <strong>idade dos seus membros</strong> e da sua <strong>renda</strong>. Há benefícios específicos para famílias com crianças, jovens até 17 anos, gestantes e mães que amamentam.</p>\r\n</div>\r\n</div>\r\n</div>\r\n<div class=\"container\">\r\n<div class=\"row\">\r\n<div class=\"col-md-12 col-sm-12\">\r\n<h3>Você sabia?</h3>\r\n</div>\r\n<div class=\"col-md-12 col-sm-12\">\r\n<ul class=\"list-styled \">\r\n<li><strong>O valor médio pago aos beneficiários do Bolsa Família é de R$ 168,00 mensais.</strong></li>\r\n<li><strong>As famílias que participam do Programa têm, em média, 2 filhos.</strong></li>\r\n</ul>\r\n</div>\r\n<div class=\"col-md-12 col-sm-12\">\r\n<blockquote class=\"text-center\">\r\n<p>Em 11 anos, 3,1 milhões de famílias saíram voluntariamente do programa Bolsa Família.</p>\r\n</blockquote>\r\n</div>\r\n</div>\r\n</div>\r\n<div class=\"container\">\r\n<div class=\"row\">\r\n<div class=\"col-md-6 col-sm-6\"><img class=\"img-responsive center-clock\" src=\"http://dialoga.gov.br/dialoga/dialoga-brasil/bolsa-familia/imagens/educacao-bolsa-familia-imagem7.jpg\" alt=\"\" /></div>\r\n<div class=\"col-md-6 col-sm-6\">\r\n<h3>Trabalho no Bolsa Família</h3>\r\n<p>Os beneficiários do Bolsa Família trabalham e trabalham muito.</p>\r\n<p>A participação dos adultos beneficiários no mercado de trabalho formal e informal é igual à dos demais brasileiros.</p>\r\n</div>\r\n</div>\r\n</div>\r\n<div class=\"container\">\r\n<div class=\"row\">\r\n<div class=\"col-md-12 col-sm-12\"><img class=\"img-responsive center-block\" src=\"http://dialoga.gov.br/dialoga/dialoga-brasil/bolsa-familia/imagens/educacao-bolsa-familia-imagem8.jpg\" alt=\"\" /></div>\r\n</div>\r\n</div>\r\n<div class=\"container\">\r\n<div class=\"row\">\r\n<div class=\"col-md-12\">\r\n<h3>Controle e transparência</h3>\r\n<p>O governo está atento para que o benefício só chegue a quem realmente precisa. Há um trabalho contínuo e rigoroso para garantir o controle e a transparência do Programa Bolsa Família e o registro de irregularidades é muito baixo.</p>\r\n<ul class=\"list-styled \">\r\n<li>A lista dos beneficiários com o valor do benefício que recebem é mantida pública, no Portal da Transparência;</li>\r\n<li>Todos os beneficiários têm que atualizar o seu cadastro a cada dois anos;</li>\r\n<li>O governo realiza cruzamentos do Cadastro Único com outras bases de dados, rotineiramente.</li>\r\n</ul>\r\n</div>\r\n</div>\r\n</div>\r\n<div class=\"container\">\r\n<div class=\"row\">\r\n<div class=\"col-md-12\">\r\n<h3>Acompanhe</h3>\r\n<p>Todo cidadão tem o direito de saber como o governo utiliza os recursos públicos. Para o Bolsa Família, existe um canal direto e gratuito para que qualquer pessoa possa obter informações ou fazer sugestões, reclamações e denúncias: <strong>0800 707 2003</strong>.</p>\r\n</div>\r\n</div>\r\n</div>\r\n<div class=\"container\">\r\n<div class=\"row\">\r\n<div class=\"col-md-12\">\r\n<h3>A renda do Bolsa Família fortalece a economia local e o desenvolvimento do País</h3>\r\n</div>\r\n<div class=\"col-md-6 col-sm-6\">\r\n<p><strong>Com o Bolsa Família</strong> todos ganham. O programa beneficia diretamente mais de 50 milhões de pessoas pobres, mas seus resultados vão além do combate à pobreza.</p>\r\n<p>O dinheiro repassado para as famílias beneficiadas fica no município, circula na economia local e gera mais trabalho e renda para outras pessoas, contribuindo para o desenvolvimento do País.</p>\r\n</div>\r\n<div class=\"col-md-6 col-sm-6\"><img class=\"img-responsive center-block\" src=\"http://dialoga.gov.br/dialoga/dialoga-brasil/bolsa-familia/imagens/educacao-bolsa-familia-imagem10.jpg\" alt=\"\" /></div>\r\n</div>\r\n<div class=\"row\">\r\n<div class=\"col-md-12\">\r\n<p>O Bolsa Família faz tanto pelo Brasil que todos os brasileiros acabam sendo beneficiados por ele, direta ou indiretamente, com a movimentação da economia e com a inclusão social..</p>\r\n</div>\r\n</div>\r\n</div>",
+        "abstract": "<p>Complemento à renda e acompanhamento em educação e saúde.</p>",
+        "title": "Bolsa Família",
+        "categories": [
+          {
+            "name": "Redução da Pobreza",
+            "id": 183,
+            "slug": "reducao-da-pobreza"
+          }
+        ],
+        "votes_for": 0,
+        "votes_against": 0,
+        "setting": {
+          "color": "#ff9900",
+          "moderate_comments": false,
+          "comment_paragraph_plugin_activate": false,
+          "author_name": "Ronald Emerson Scherolt da Costa",
+          "allow_members_to_edit": false
+        },
+        "position": 17,
+        "hits": 68,
+        "tag_list": [],
+        "children_count": 9,
+        "slug": "bolsa-familia"
+      }, {
+        "ranking_position": null,
+        "id": 103379,
+        "body": "<div class=\"container\">\r\n<div class=\"row\">\r\n<div class=\"col-md-12\">\r\n<h2>SAMU 192 e UPAs <small>Resgate e atendimento 24 horas, sete dias por semana.</small></h2>\r\n</div>\r\n</div>\r\n<div class=\"row\">\r\n<div class=\"col-md-12\">\r\n<p class=\"text-center\"><img class=\"img-responsive center-block\" src=\"http://dialoga.gov.br/dialoga/dialoga-brasil/urgencia-e-emergencia/imagens/img-destaque-1.jpg\" alt=\"Ambulancha e SAMU 192\" /></p>\r\n<p>O SAMU 192 foi criado em 2003 e chega a 75% da população brasileira, garantindo socorro e transporte de emergência. São 3.300 ambulâncias (vans, motos, lanchas e helicópteros).</p>\r\n</div>\r\n</div>\r\n</div>\r\n<div class=\"container\">\r\n<div class=\"row\">\r\n<div class=\"col-md-12\">\r\n<h3>SAMU 192 já chega a 153,9 milhões de pessoas</h3>\r\n<p class=\"text-center\"><img class=\"img-responsive center-block\" src=\"http://dialoga.gov.br/dialoga/dialoga-brasil/samu-192-e-upas/imagens/grafico-1.jpg\" alt=\"Em 2005 o SAMU chegou à 60 milhões de pessoas. Em 2015 o SAMU chegou à 153,9 milhões de pessoas.\" width=\"725\" height=\"138\" /></p>\r\n</div>\r\n</div>\r\n</div>\r\n<div class=\"container\">\r\n<div class=\"row\">\r\n<div class=\"col-md-12\">\r\n<h3>UPA - Unidades de Pronto Atendimento</h3>\r\n</div>\r\n</div>\r\n<div class=\"row\">\r\n<div class=\"col-md-6\"><img class=\"img-responsive center-block\" src=\"http://dialoga.gov.br/dialoga/dialoga-brasil/urgencia-e-emergencia/imagens/img-destaque-2.jpg\" alt=\"UPA 24h\" width=\"374\" height=\"346\" /></div>\r\n<div class=\"col-md-6\">\r\n<p>As Unidades de Pronto Atendimento podem resolver 90% das urgências e emergências de atendimento à saúde, como fraturas, problemas de pressão, derrames e infartos.</p>\r\n<p>As UPAs fazem parte de uma rede de atendimento, complementando as emergências dos hospitais e a internação domiciliar. Assim, as UPAs ajudam a diminuir a demanda sobre os pronto-socorros dos hospitais, que devem receber e atender rapidamente os casos mais graves e que exigem imediata internação.</p>\r\n<blockquote>\r\n<p class=\"text-center\">Há 400 UPAs em funcionamento no Brasil.</p>\r\n</blockquote>\r\n<p>Os serviços de atendimento para urgências e emergências estão sendo integrados e ampliados.</p>\r\n</div>\r\n</div>\r\n</div>\r\n<div class=\"container\">\r\n<div class=\"row\">\r\n<div class=\"col-md-12\">\r\n<h3>Compromissos</h3>\r\n</div>\r\n</div>\r\n<div class=\"row\">\r\n<div class=\"col-md-6\"><img class=\"img-responsive center-block\" src=\"http://dialoga.gov.br/dialoga/dialoga-brasil/samu-192-e-upas/imagens/grafico-2.jpg\" alt=\"Imagem da rede de atenção as urgências e emergências. Posto de saúde, SAMU, UPA 24h, UBS e Hospital\" width=\"536\" height=\"402\" /></div>\r\n<div class=\"col-md-6\">\r\n<ul class=\"list-unstyled\">\r\n<li>Levar o atendimento do SAMU 192 para toda a população brasileira.</li>\r\n<li>Garantir a expansão das Unidades de Pronto Atendimento (UPAs) em todas as regiões do país.</li>\r\n<li>Garantir à população o atendimento em hospitais de referência para situações de urgência (cirurgias, internações e UTIs).</li>\r\n</ul>\r\n</div>\r\n</div>\r\n</div>",
+        "abstract": "<p>Resgate e atendimento 24 horas, sete dias da semana.</p>",
+        "title": "SAMU 192 e UPAs",
+        "categories": [
+          {
+            "name": "Saúde",
+            "id": 180,
+            "slug": "saude"
+          }
+        ],
+        "votes_for": 0,
+        "votes_against": 0,
+        "setting": {
+          "color": "#45818e",
+          "moderate_comments": false,
+          "comment_paragraph_plugin_activate": false,
+          "author_name": "Ronald Emerson Scherolt da Costa",
+          "allow_members_to_edit": false
+        },
+        "position": 4,
+        "hits": 72,
+        "tag_list": [],
+        "children_count": 13,
+        "slug": "samu-192-e-upas"
+      }, {
+        "ranking_position": null,
+        "id": 103390,
+        "body": "<div class=\"container\">\r\n<div class=\"row\">\r\n<div class=\"col-md-12\">\r\n<h2>Crack, é possível vencer!<small>Prevenção, tratamento e enfrentamento ao tráfico.</small></h2>\r\n</div>\r\n</div>\r\n<div class=\"row\">\r\n<div class=\"col-md-12\"><img class=\"img-responsive center-block\" src=\"http://dialoga.gov.br/dialoga/dialoga-brasil/crack-e-possivel-vencer/imagens/crack-img-1.jpg\" alt=\"\" /></div>\r\n</div>\r\n</div>\r\n<div class=\"container\">\r\n<div class=\"row\">\r\n<div class=\"col-md-12\">\r\n<p>O problema das drogas é um desafio ao mesmo tempo urgente e complexo. Requer medidas preventivas, de combate ao tráfico e, principalmente, oferta de serviços de saúde e assistência social.</p>\r\n<p>O programa “Crack, é possível vencer” envolve ações em três eixos: cuidado, autoridade e prevenção.</p>\r\n<p>O “<strong>cuidado</strong>” abrange a ampliação e a melhoria do atendimento para pessoas com problemas causados pelas drogas e para suas famílias, nas áreas de saúde e assistência social.</p>\r\n<p>No eixo “<strong>autoridade</strong>”, o foco é a integração de inteligência e cooperação entre forças policiais federais e estaduais. Envolve policiamento ostensivo nos pontos de uso e venda de drogas e a revitalização desses espaços, melhorando-os para toda a comunidade.</p>\r\n<p>Na área de “<strong>prevenção</strong>” são realizadas ações especiais em escolas e nas comunidades, assim como iniciativas de comunicação e informação para a população em geral.</p>\r\n<p><strong>Muitos resultados</strong> positivos <strong>foram</strong> alcançados <strong>de 2011 a 2014</strong>.</p>\r\n</div>\r\n</div>\r\n</div>\r\n<div class=\"container\">\r\n<div class=\"row\">\r\n<div class=\"col-md-12 list-container-border\">\r\n<h4>CUIDADO - Saúde e assistência</h4>\r\n<ul class=\"list-unstyled no-border\">\r\n<li>2.200 Centros de Atenção Psicossocial (CAPS)</li>\r\n<li>360 CAPS Álcool e Drogas</li>\r\n<li>60 Unidades de Acolhimento</li>\r\n<li>8.034 vagas em comunidades terapêuticas</li>\r\n</ul>\r\n</div>\r\n</div>\r\n<div class=\"row\">\r\n<div class=\"col-md-12 list-container-border\">\r\n<h4>AUTORIDADE - Combate ao tráfico</h4>\r\n<ul class=\"list-unstyled no-border\">\r\n<li>Intensificação das operações</li>\r\n<li>7.700 profissionais de segurança pública capacitados</li>\r\n<li>Instalação de 26 grupos de investigações sensíveis da Polícia Federal</li>\r\n</ul>\r\n</div>\r\n</div>\r\n<div class=\"row\">\r\n<div class=\"col-md-12 list-container-border\">\r\n<h4>PREVENÇÃO</h4>\r\n<ul class=\"list-unstyled no-border\">\r\n<li>367 mil funcionários capacitados na temática de drogas em todo o País</li>\r\n<li>4 mil ligações-dia e 230 mil atendimentos efetivos no ligue 132, serviço gratuito de atendimento telefônico para informações sobre drogas</li>\r\n</ul>\r\n</div>\r\n</div>\r\n</div>",
+        "abstract": "<p>Prevenção, tratamento e enfrentamento ao tráfico.</p>",
+        "title": "Crack, é possível vencer!",
+        "categories": [
+          {
+            "name": "Segurança Pública",
+            "id": 182,
+            "slug": "seguranca-publica"
+          }
+        ],
+        "votes_for": 0,
+        "votes_against": 0,
+        "setting": {
+          "color": "#00ff00",
+          "moderate_comments": false,
+          "comment_paragraph_plugin_activate": false,
+          "author_name": "Ronald Emerson Scherolt da Costa",
+          "allow_members_to_edit": false
+        },
+        "position": 14,
+        "hits": 44,
+        "tag_list": [],
+        "children_count": 7,
+        "slug": "crack-e-possivel-vencer"
+      }
+    ]};
   return data;
 };
@@ -9,14 +9,11 @@
   function articleBox($rootScope) {
     /** @ngInject */
-    function ArticleBoxController(ArticleService, $scope, $state, Slug, $log) {
+    function ArticleBoxController($state, $log) {
       $log.debug('ArticleBoxController');
       var vm = this;
-      vm.ArticleService = ArticleService;
-      vm.$scope = $scope;
       vm.$state = $state;
-      vm.Slug = Slug;
       vm.$log = $log;
       vm.init();
@@ -26,24 +23,19 @@
       var vm = this;
       if(!vm.article.slug){
-        vm.article.slug = vm.Slug.slugify(vm.article.title);
+        throw { name: 'NotDefined', message: 'The attribute "slug" is undefined.'};
       }
       if(!vm.category){
-        vm.category = vm.article.categories[0];
+        throw { name: 'NotDefined', message: 'The attribute "category" is undefined.'};
       }
-      if(!vm.banner && vm.article.image){
-        vm.banner = {
+      if(!vm.image && vm.article.image){
+        vm.image = {
           src: $rootScope.basePath + vm.article.image.url,
           alt: 'Imagem de destaque do conteúdo'
         };
       }
-
-      // if(vm.article.color && !vm.article.bgColor){
-      //   // 15% more darker
-      //   vm.article.colorDarker = window.ColorLuminance(vm.article.color, 0.15);
-      // }
     };
     ArticleBoxController.prototype.showContent = function () {
@@ -60,7 +52,8 @@
       restrict: 'E',
       templateUrl: 'app/components/article-box/article-box.html',
       scope: {
-        article: '='
+        article: '=',
+        category: '='
       },
       controller: ArticleBoxController,
       controllerAs: 'vm',
 <article class="article-box" ng-click="vm.showContent()" ng-class="vm.category.slug">
   <div>
-    <h2 class="article-box--category">{{vm.category.name}}</h2>
+    <h2 class="article-box--category">{{ ::vm.category.name }}</h2>
     <div class="article-box--image-wrapper">
-      <!-- <img class="article-box--image img-responsive" ng-src="{{vm.banner.src}}" alt="{{vm.banner.alt}}" /> -->
-      <div class="article-box--image" ng-style="{'background-image':'url( {{vm.banner.src}} )'}"></div>
+      <div class="article-box--image" ng-style="{ 'background-image' : 'url({{ vm.image.src }})' }"></div>
     </div>
     <div class="article-box--title">
       <h1>{{::vm.article.title}}</h1>
@@ -9,7 +9,7 @@
   function articleGrid() {
     /** @ngInject */
-    function ArticleGridController($scope, $rootScope, $element, ArticleService, $location, $filter, $log) {
+    function ArticleGridController($scope, $rootScope, $element, $location, $filter, $log) {
       $log.debug('ArticleGridController');
       // alias
@@ -19,7 +19,6 @@
       vm.$scope = $scope;
       vm.$rootScope = $rootScope;
       vm.$element = $element;
-      vm.ArticleService = ArticleService;
       vm.$location = $location;
       vm.$filter = $filter;
       vm.$log = $log;
@@ -27,280 +26,24 @@
       // initialization
       vm.init();
+      vm.attachListeners();
     }
     ArticleGridController.prototype.init = function() {
-      var vm = this;
-
-      vm.articles = null;
-      vm.filtredArticleList = null;
-      vm.categories = null;
-
-      vm.orderCriteries = [
-        { label: 'Título', name: 'titulo' },
-        { label: 'Tema', name: 'tema' },
-        { label: 'Aleatório', name: 'aleatorio' }
-      ];
-
-      vm.search = vm.$location.search();
-
-      // Add initial values for the filter
-      vm.query = (vm.search && vm.search.filtro) ? vm.search.filtro : null;
-      vm.limitTo = (vm.search && vm.search.limite) ? parseInt(vm.search.limite, 10) : vm.defaultLimit;
-      vm.orderCriteria = (vm.search && vm.search.ordem) ? { name: vm.search.ordem } : null;
-      vm.reverse = (vm.search && vm.search.reverso) ? true : false;
-
-      // vm.selectedCategory = (vm.search && vm.search.tema) ? vm.getCategoryBySlug(vm.search.tema) : null;
-      if (vm.search && vm.search.tema) {
-        var slug = vm.search.tema;
-        vm.ArticleService.getCategoryBySlug(slug, function(category){
-          vm.selectedCategory = category;
-        }, function(error){
-          vm.$log.error('Error when try to "getCategoryBySlug"', error);
-        });
-      }
-
-      if (!angular.equals({}, vm.search)) {
-        var $el = vm.$element;
-        angular.element('body').animate({scrollTop: $el.offset().top}, 'slow');
-      }
-
-      vm.loadData(function(){
-        vm.filtredArticleList = vm.getFiltredArticles();
-      });
-
-      vm.attachListeners();
+      // var vm = this;
+      // vm.programs = null; // scope var
     };
     ArticleGridController.prototype.attachListeners = function() {
-      var vm = this;
-
-      // update window location params
-      vm.$scope.$on('change-selectedCategory', function(event, selectedCategory){
-        vm.selectedCategory = selectedCategory;
-      });
-
-      vm.$scope.$watch('vm.query', function(newValue/*, oldValue*/) {
-        vm.search.filtro = newValue ? newValue : null;
-        vm.$location.search('filtro', vm.search.filtro);
-        if(vm.search.filtro){
-          vm.limitTo = vm.articles.length;
-        }else{
-          vm.limitTo = vm.defaultLimit;
-        }
-        vm.filtredArticleList = vm.getFiltredArticles();
-      });
-
-      vm.$scope.$watch('vm.limitTo', function(newValue/*, oldValue*/) {
-        vm.search.limite = (newValue && newValue !== vm.defaultLimit)  ? newValue : null;
-        vm.$location.search('limite', vm.search.limite);
-        vm.filtredArticleList = vm.getFiltredArticles();
-      });
-
-      vm.$scope.$watch('vm.selectedCategory', function(newValue/*, oldValue*/) {
-        vm.search.tema = newValue ? newValue.slug : null;
-        vm.$location.search('tema', vm.search.tema);
-        if(vm.search.tema){
-          vm.limitTo = vm.articles.length;
-        }else{
-          vm.limitTo = vm.defaultLimit;
-        }
-        vm.filtredArticleList = vm.getFiltredArticles();
-      });
-
-      vm.$scope.$watch('vm.orderCriteria', function(newValue/*, oldValue*/) {
-        vm.search.ordem = (newValue && newValue.name) ? newValue.name : null;
-        vm.$location.search('ordem', vm.search.ordem);
-        vm.filtredArticleList = vm.getFiltredArticles();
-      });
-
-      vm.$scope.$watch('vm.reverse', function(newValue/*, oldValue*/) {
-        vm.search.reverso = newValue ? newValue : null;
-        vm.$location.search('reverso', vm.search.reverso);
-        vm.filtredArticleList = vm.getFiltredArticles();
-      });
-
-    };
-    ArticleGridController.prototype.loadData = function(cb) {
-      var vm = this;
-
-      var articlesLoaded = false;
-      var categoriesLoaded = false;
-
-      vm.ArticleService.getPrograms(function(programs){
-        vm.articles = programs;
-        articlesLoaded = true;
-        endLoad();
-      });
-
-      vm.ArticleService.getCategories(function(categories){
-        vm.categories = categories;
-        categoriesLoaded = true;
-        endLoad();
-      });
-
-      function endLoad () {
-        if(articlesLoaded && categoriesLoaded){
-          cb();
-        }
-      }
-    };
-
-    ArticleGridController.prototype.resetFilterValues = function() {
-      var vm = this;
-
-      vm.query = null;
-      vm.limitTo = vm.defaultLimit;
-      vm.selectedCategory = null;
-      vm.orderCriteria = null;
-    };
-
-    ArticleGridController.prototype.getIconClasses = function(category) {
-      var vm = this;
-
-      vm.$log.debug('[TODO] getIconClasses of category:', category);
-      return 'glyphicon glyphicon-exclamation-sign';
-    };
-
-    ArticleGridController.prototype.getCategoryBySlug = function(categorySlug) {
-      var vm = this;
-      var result = null;
-
-      angular.forEach(vm.categories, function(value/*, key*/) {
-        if (value.slug === categorySlug) {
-          result = value;
-        }
-      });
-
-      return result;
-    };
-
-    ArticleGridController.prototype.showAll = function($event) {
-      var vm = this;
-
-      $event.stopPropagation();
-
-      vm.resetFilterValues();
-      vm.limitTo = vm.articles.length;
-    };
-
-    ArticleGridController.prototype.getFiltredArticles = function() {
-      var vm = this;
-
-      if(!vm.articles){
-        vm.$log.warn('No articles loaded yet. Abort.');
-        return null;
-      }
-
-      var input = vm.articles;
-      var output = input;
-      var query = vm.query;
-      var selectedCategory = vm.selectedCategory;
-      var orderCriteria = vm.orderCriteria ? vm.orderCriteria : { name : 'aleatorio'};
-      var filter = vm.$filter('filter');
-      var orderBy = vm.$filter('orderBy');
-      var limitTo = vm.$filter('limitTo');
-      var limit = vm.limitTo ? vm.limitTo : 4;
-
-      if (selectedCategory) {
-        output = _filterByCategory(output, selectedCategory);
-      }
-
-      if (query) {
-        output = filter(output, query, false);
-      }
-
-      switch (orderCriteria.name) {
-        case 'titulo':
-          output = orderBy(output, 'title', vm.reverse);
-          break;
-        case 'tema':
-          output = orderBy(output, 'categories[0].name', vm.reverse);
-          break;
-        case 'more_participants':
-          vm.$log.info('Criteria not handled yet: ', orderCriteria);
-          break;
-        case 'aleatorio':
-          // shuffling
-          // if (!vm._isShuffled){
-          output = vm.filterShuffle(output);
-          //   vm._isShuffled = true;
-          // }
-
-          if (vm.reverse) {
-            output = output.slice().reverse();
-          }
-
-          break;
-        default:
-          vm.$log.warn('Criteria not matched: ', orderCriteria);
-          break;
-      }
-
-      output = limitTo(output, limit);
-
-      return output;
-    };
-
-    ArticleGridController.prototype.filterShuffle = function(input) {
-      var result = [];
-      var resultByCategory = {};
-
-      // divide by categories
-      for (var i = 0; i < input.length; i++) {
-        var program = input[i];
-        var categorySlug = program.categories[0].slug;
-
-        if (!resultByCategory[categorySlug]) {
-          resultByCategory[categorySlug] = [];
-        }
-
-        resultByCategory[categorySlug].push(program);
-      }
-
-      // shuffle each array
-      var prop = null;
-      var categoryWithPrograms = null;
-      for (prop in resultByCategory) {
-        if (resultByCategory.hasOwnProperty(prop)) {
-          categoryWithPrograms = resultByCategory[prop];
-          resultByCategory[prop] = shuffle(categoryWithPrograms);
-        }
-      }
-
-      // Concat all into result array
-      // > while has program at Lists on resultByCategory
-      var hasProgram = true;
-      while (hasProgram) {
-
-        var foundProgram = false;
-        // each categoryList with array of program
-        prop = null;
-        categoryWithPrograms = null;
-        for (prop in resultByCategory) {
-
-          if (resultByCategory.hasOwnProperty(prop)) {
-            categoryWithPrograms = resultByCategory[prop];
-
-            if (categoryWithPrograms.length > 0) {
-              var pivotProgram = categoryWithPrograms.pop();
-              result.push(pivotProgram);
-              foundProgram = true;
-            }
-          }
-        }
-
-        if (!foundProgram) {
-          hasProgram = false;
-        }
-      }
-
-      return result;
+      // var vm = this;
     };
     var directive = {
       restrict: 'E',
       templateUrl: 'app/components/article-grid/article-grid.html',
+      scope: {
+        articles: '='
+      },
       controller: ArticleGridController,
       controllerAs: 'vm',
       bindToController: true
@@ -308,44 +51,4 @@
     return directive;
   }
-
-  function _filterByCategory (input, category) {
-    input = input || [];
-
-    if (!category) {
-      // no filter
-      return input;
-    }
-
-    var out = [];
-    for (var i = 0; i < input.length; i++) {
-      var program = input[i];
-      if (program.categories[0].slug === category.slug) {
-        out.push(program);
-      }
-    }
-
-    return out;
-  }
-
-  // -> Fisher–Yates shuffle algorithm
-  function shuffle (array) {
-    var currentIndex = array.length, temporaryValue, randomIndex ;
-
-    // While there remain elements to shuffle...
-    while (0 !== currentIndex) {
-
-      // Pick a remaining element...
-      randomIndex = Math.floor(Math.random() * currentIndex);
-      currentIndex -= 1;
-
-      // And swap it with the current element.
-      temporaryValue = array[currentIndex];
-      array[currentIndex] = array[randomIndex];
-      array[randomIndex] = temporaryValue;
-    }
-
-    return array;
-  }
-
 })();
-<article class="article-grid">
-  <header class="header">
-    <h2>Conheça os programas <span class="small">({{vm.filtredArticleList.length}}/{{vm.articles.length}})</span></h2>
-    <button type="button" class="btn btn-link" ng-click="vm.showAll($event)">
-      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> Ver todos os {{vm.articles.length}} programas
-    </button>
-  </header>
-  <div>
-    <div class="col-sm-12">
-      <aside class="form-inline">
-        <div class="row">
-          <div class="col-xs-6 col-sm-7 col-md-9">
-            <label for="articleQueryFilter" class="control-label sr-only">Filtrar programas:</label>
-            <input id="articleQueryFilter" type="search" class="form-control" ng-model="vm.query" placeholder="Filtrar programas" aria-label="Filtrar programas" >
-          </div>
-
-          <!-- <label for="selectCategoryFilter" class="control-label sr-only">Filtrar por tema:</label>
-          <select id="selectCategoryFilter" name="selectCategoryFilter" class="form-control" ng-model="vm.categoryFilter" ng-options="category.name for category in vm.categories track by category.slug">
-            <option value="">-- Filtrar por tema --</option>
-          </select> -->
-
-          <div class="col-xs-6 col-sm-5 col-md-3">
-            <label for="articleOrderByFilter" class="control-label sr-only">Ordernar por:</label>
-            <select id="articleOrderByFilter" name="articleOrderByFilter" class="form-control pull-right" ng-model="vm.orderCriteria" ng-options="orderCriteria.label for orderCriteria in vm.orderCriteries">
-              <option value="">-- Ordernar por: --</option>
-            </select>
-          </div>
-          <!-- <div class="checkbox">
-            <label>
-              <input type="checkbox" ng-model="vm.reverse">
-              Reverso
-            </label>
-          </div> -->
-
-          <!-- <input id="articleLimitFilter" type="number" class="form-control input-sm" size="4" step="2" ng-model="vm.limitTo" aria-label="Limitar" >
-          <label for="articleLimitFilter" class="control-label">Limite</label> -->
-
-        </div>
-      </aside>
-    </div>
-
-    <div ng-repeat="article in vm.filtredArticleList as results">
-      <article-box article="article" class="col-xs-12 col-sm-6"></article-box>
-      <div ng-if="$odd" class="clearfix"></div>
-    </div>
-    <div class="animate-repeat" ng-if="results.length == 0">
-      Nenhum programa encontrado.
-    </div>
+<div class="article-grid">
+  <div ng-repeat="article in vm.articles as results">
+    <article-box article="article" category="article.categories[0]" class="col-xs-12 col-sm-6"></article-box>
+    <div ng-if="$odd" class="clearfix"></div>
   </div>
-</article>
+  <div class="animate-repeat" ng-if="results.length == 0">
+    Nenhum programa encontrado.
+  </div>
+</div>
 .article-grid {
-    .header {
-        position: relative;
-        height: 40px;
-        margin-bottom: 10px;
-
-        button {
-            position: absolute;
-            right: 0;
-            top: 2px;
-        }
-    }
-
-    .form-inline {
-        input,
-        select {
-            width: 100%;
-        }
-    }
 }
@@ -9,14 +9,11 @@
   function articlePreview($rootScope) {
     /** @ngInject */
-    function ArticlePreviewController(ArticleService, $scope, $state, Slug, $log) {
+    function ArticlePreviewController($state, $log) {
       $log.debug('ArticlePreviewController');
       var vm = this;
-      vm.ArticleService = ArticleService;
-      vm.$scope = $scope;
       vm.$state = $state;
-      vm.Slug = Slug;
       vm.$log = $log;
       vm.init();
@@ -26,7 +23,7 @@
       var vm = this;
       if(!vm.article.slug){
-        vm.article.slug = vm.Slug.slugify(vm.article.title);
+        throw { name: 'NotDefined', message: 'The attribute "slug" is undefined.'};
       }
       if(!vm.category){
@@ -0,0 +1,159 @@
+(function() {
+  'use strict';
+
+  angular
+    .module('dialoga')
+    .factory('ArticleService', ArticleService);
+
+  /** @ngInject */
+  function ArticleService($http, $q, $rootScope, API, UtilService, Slug, $log) {
+    $log.debug('ArticleService');
+
+    var service = {
+      apiArticles: $rootScope.basePath + '/api/v1/articles/',
+      getArticleById: getArticleById,
+      getArticleBySlug: getArticleBySlug,
+      getCategories: getCategories,
+      getCategoryBySlug: getCategoryBySlug,
+      getTopics: getTopics,
+      getTopicById: getTopicById,
+      getProposals: getProposals,
+      getProposalsByTopicId: getProposalsByTopicId,
+      searchTopics: searchTopics,
+      searchProposals: searchProposals
+    };
+
+    return service;
+
+    function _getArticleById (articleId, params, cbSuccess, cbError) {
+
+      var url = service.apiArticles + articleId;
+      var paramsExtended = angular.extend({}, params);
+
+      UtilService.get(url, {params: paramsExtended}).then(function(data){
+        cbSuccess(data);
+      }).catch(function(error){
+        cbError(error);
+      });
+    }
+
+    function getArticleById (articleId, params, cbSuccess, cbError) {
+      _getArticleById(articleId, params, cbSuccess, cbError);
+    }
+
+    function getArticleBySlug (/*slug, params, cbSuccess, cbError*/) {
+      throw { name: 'NotImplementedYet', message: 'The service "getArticleBySlug" is not implemented yet.'};
+    }
+
+    function getCategories (articleId, cbSuccess, cbError) {
+      // Ex.: /api/v1/articles/103358?fields=
+
+      var url = service.apiArticles + articleId;
+
+      UtilService.get(url, {params: {
+        'fields[]': ['id', 'categories']
+      }}).then(function(data){
+        cbSuccess(data);
+      }).catch(function(error){
+        cbError(error);
+      });
+    }
+
+    function getCategoryBySlug () {
+      throw { name: 'NotImplementedYet', message: 'The service "getArticleBySlug" is not implemented yet.'};
+    }
+
+    function getTopics (cbSuccess, cbError) {
+      // Ex.: /api/v1/articles/103358/children?fields=
+
+      var url = service.apiArticles + API.articleId.home + '/children';
+
+      UtilService.get(url, {params: {
+        'fields[]': ['id', 'title', 'slug', 'abstract', 'categories', 'setting', 'children_count', 'hits']
+      }}).then(function(data){
+        cbSuccess(data);
+      }).catch(function(error){
+        cbError(error);
+      });
+    }
+
+    function getTopicById (topicId, cbSuccess, cbError) {
+      // Ex.: /api/v1/articles/103358/children/121521?fields=
+
+      // var url = service.apiArticles + API.articleId.home + '/children/' + topicId; // dont need to chain
+      var url = service.apiArticles + topicId;
+
+      UtilService.get(url, {params: {
+        'fields[]': ['id', 'title', 'body', 'slug', 'abstract', 'categories', 'setting', 'children_count', 'hits']
+      }}).then(function(data){
+        cbSuccess(data);
+      }).catch(function(error){
+        cbError(error);
+      });
+    }
+
+    function getProposals (params, cbSuccess, cbError) {
+      // Ex.: /api/v1/articles/103358?fields=
+
+      var url = service.apiArticles + API.articleId.home;
+
+      var paramsExtended = angular.extend({
+        'fields[]': ['id', 'title', 'slug', 'abstract', 'categories', 'setting', 'children_count', 'hits'],
+        'content_type':'ProposalsDiscussionPlugin::Proposals'
+      }, params);
+
+      UtilService.get(url, {params: paramsExtended}).then(function(data){
+        cbSuccess(data);
+      }).catch(function(error){
+        cbError(error);
+      });
+    }
+
+    function getProposalsByTopicId (topicId, params, cbSuccess, cbError) {
+      var url = service.apiArticles + topicId;
+
+      var paramsExtended = angular.extend({
+        'fields[]': ['id', 'title', 'abstract', 'children', 'children_count'],
+        'content_type':'ProposalsDiscussionPlugin::Proposals'
+      }, params);
+
+      UtilService.get(url, {params: paramsExtended}).then(function(data){
+        cbSuccess(data);
+      }).catch(function(error){
+        cbError(error);
+      });
+    }
+
+    function getRandomProposal (cbSuccess, cbError) {}
+
+    function searchTopics (params, cbSuccess, cbError) {
+      // Ex.: /api/v1/search/article?type=ProposalsDiscussionPlugin::Topic&query=cisternas
+      var url = '/api/v1/search/article';
+      var paramsExtended = angular.extend({
+        'fields[]': ['id', 'title', 'slug', 'abstract', 'categories', 'setting', 'children_count', 'hits'],
+        'type': 'ProposalsDiscussionPlugin::Topic'
+      }, params);
+
+      UtilService.get(url, {params: paramsExtended}).then(function(data){
+        cbSuccess(data);
+      }).catch(function(error){
+        cbError(error);
+      });
+    }
+
+    function searchProposals (params, cbSuccess, cbError) {
+      // Ex.: /api/v1/search/article?type=ProposalsDiscussionPlugin::Proposal&query=cisternas
+      var url = '/api/v1/search/article';
+      var paramsExtended = angular.extend({
+        'fields[]': ['id', 'title', 'slug', 'abstract', 'categories', 'setting', 'children_count', 'hits'],
+        'type': 'ProposalsDiscussionPlugin::Proposal'
+      }, params);
+
+      UtilService.get(url, {params: paramsExtended}).then(function(data){
+        cbSuccess(data);
+      }).catch(function(error){
+        cbError(error);
+      });
+    }
+  }
+})();
@@ -0,0 +1,67 @@
+(function() {
+  'use strict';
+
+  describe('article services', function() {
+    var ArticleService, httpBackend;
+
+    beforeEach(module('dialoga'));
+
+    beforeEach(inject(function(_ArticleService_, $httpBackend) {
+      ArticleService = _ArticleService_;
+      httpBackend = $httpBackend;
+    }));
+
+    it('should return the main article', function() {
+      var url = 'http://login.dialoga.gov.br/api/v1/articles/103358?fields=id,children,categories,abstract,title,image,url,setting,position&private_token=null';
+      httpBackend.whenGET(url).respond({
+        'article':{'id':103358,'abstract':'\u003Cp style=\"text-align: center;\"\u003E\u003Ciframe src=\"https://www.youtube.com/embed/kpAdrO-emV0?rel=0\u0026amp;showinfo=0\u0026amp;iv_load_policy=3\u0026amp;controls=1\" style=\"max-width: 1000px; left: 5%;\" width=\"275\" height=\"200\"\u003E\u003C/iframe\u003E\u003C/p\u003E','title':'Dialoga Brasil','categories':[{'name':'Sa\u00fade','id':180,'slug':'saude','image':null},{'name':'Seguran\u00e7a P\u00fablica','id':182,'slug':'seguranca-publica','image':null},{'name':'Educa\u00e7\u00e3o','id':181,'slug':'educacao','image':null},{'name':'Redu\u00e7\u00e3o da Pobreza','id':183,'slug':'reducao-da-pobreza','image':null}],'image':null,'setting':{'custom_body_label':'Corpo','phase':'proposals','allow_topics':true,'moderate_comments':false,'comment_paragraph_plugin_activate':false,'author_name':'Leandro Nunes dos Santos','moderate_proposals':true,'allow_members_to_edit':false},'position':null,'children':[{'id':103644,'abstract':'\u003Cp\u003EUm caminho de oportunidades com o Enem: Sisu, Prouni, Fies, Ci\u00eancia sem Fronteiras\u003C/p\u003E','title':'Ensino Superior','categories':[{'name':'Educa\u00e7\u00e3o','id':181,'slug':'educacao','image':null}],'image':{'url':'/image_uploads/dialoga/0000/0128/enem.jpg'},'setting':{'color':'#cfe2f3','moderate_comments':false,'comment_paragraph_plugin_activate':false,'author_name':'Ronald Emerson Scherolt da Costa','allow_members_to_edit':false},'position':9},{'id':103673,'abstract':'\u003Cp\u003EA melhor escolha \u00e9 se informar.\u003C/p\u003E','title':'Incentivo ao Parto Normal','categories':[{'name':'Sa\u00fade','id':180,'slug':'saude','image':null}],'image':{'url':'/image_uploads/dialoga/0000/0092/parto-normal.jpg'},'setting':{'color':'#ff0000','moderate_comments':false,'comment_paragraph_plugin_activate':false,'author_name':'Ronald Emerson Scherolt da Costa','allow_members_to_edit':false},'position':6},{'id':103397,'abstract':'\u003Cp\u003ERenda, inclus\u00e3o produtiva e acesso a servi\u00e7os.\u003C/p\u003E','title':'Brasil Sem Mis\u00e9ria','categories':[{'name':'Redu\u00e7\u00e3o da Pobreza','id':183,'slug':'reducao-da-pobreza','image':null}],'image':{'url':'/image_uploads/dialoga/0000/0116/bsm_redim.jpg'},'setting':{'color':'','moderate_comments':false,'comment_paragraph_plugin_activate':false,'author_name':'Ronald Emerson Scherolt da Costa','allow_members_to_edit':false},'position':18},{'id':103379,'abstract':'\u003Cp\u003EResgate e atendimento 24 horas, sete dias da semana.\u003C/p\u003E','title':'SAMU 192 e UPAs','categories':[{'name':'Sa\u00fade','id':180,'slug':'saude','image':null}],'image':{'url':'/image_uploads/dialoga/0000/0060/SAMU.jpg'},'setting':{'color':'#45818e','moderate_comments':false,'comment_paragraph_plugin_activate':false,'author_name':'Ronald Emerson Scherolt da Costa','allow_members_to_edit':false},'position':4},{'id':103521,'abstract':'\u003Cp\u003EMais atendimento nos munic\u00edpios, mais sa\u00fade para quem mais precisa.\u003C/p\u003E','title':'Mais M\u00e9dicos','categories':[{'name':'Sa\u00fade','id':180,'slug':'saude','image':null}],'image':{'url':'/image_uploads/dialoga/0000/0025/Mais_M_dicos.jpg'},'setting':{'color':'#ffe599','moderate_comments':false,'comment_paragraph_plugin_activate':false,'author_name':'Ronald Emerson Scherolt da Costa','allow_members_to_edit':false},'position':1},{'id':103390,'abstract':'\u003Cp\u003EPreven\u00e7\u00e3o, tratamento e enfrentamento ao tr\u00e1fico.\u003C/p\u003E','title':'Crack, \u00e9 poss\u00edvel vencer!','categories':[{'name':'Seguran\u00e7a P\u00fablica','id':182,'slug':'seguranca-publica','image':null}],'image':{'url':'/image_uploads/dialoga/0000/0104/crack.jpg'},'setting':{'color':'#00ff00','moderate_comments':false,'comment_paragraph_plugin_activate':false,'author_name':'Ronald Emerson Scherolt da Costa','allow_members_to_edit':false},'position':14},{'id':103592,'abstract':'\u003Cp\u003EGarantir acesso \u00e0 prote\u00e7\u00e3o social.\u003C/p\u003E','title':'Assist\u00eancia Social','categories':[{'name':'Redu\u00e7\u00e3o da Pobreza','id':183,'slug':'reducao-da-pobreza','image':null}],'image':{'url':'/image_uploads/dialoga/0000/0122/assistencia_social.jpg'},'setting':{'color':'#a61c00','moderate_comments':false,'comment_paragraph_plugin_activate':false,'author_name':'Ronald Emerson Scherolt da Costa','allow_members_to_edit':false},'position':19},{'id':103426,'abstract':'\u003Cp\u003EDa sa\u00fade se cuida todos os dias.\u003C/p\u003E','title':'Vida saud\u00e1vel','categories':[{'name':'Sa\u00fade','id':180,'slug':'saude','image':null}],'image':{'url':'/image_uploads/dialoga/0000/0046/vida_saudavel.jpg'},'setting':{'color':'#d9d2e9','moderate_comments':false,'comment_paragraph_plugin_activate':false,'author_name':'Ronald Emerson Scherolt da Costa','allow_members_to_edit':false},'position':7},{'id':103695,'abstract':'\u003Cp\u003ENovo modelo de atua\u00e7\u00e3o em Seguran\u00e7a P\u00fablica.\u003C/p\u003E','title':'Seguran\u00e7a P\u00fablica Integrada','categories':[{'name':'Seguran\u00e7a P\u00fablica','id':182,'slug':'seguranca-publica','image':null}],'image':{'url':'/image_uploads/dialoga/0000/0152/policiaintegrada.jpg'},'setting':{'color':'#ff00ff','moderate_comments':false,'comment_paragraph_plugin_activate':false,'author_name':'Ronald Emerson Scherolt da Costa','allow_members_to_edit':false},'position':13},{'id':103663,'abstract':'\u003Cp\u003EMais educa\u00e7\u00e3o profissional e tecnol\u00f3gica, mais desenvolvimento\u003C/p\u003E','title':'Ensino T\u00e9cnico','categories':[{'name':'Educa\u00e7\u00e3o','id':181,'slug':'educacao','image':null}],'image':{'url':'/image_uploads/dialoga/0000/0134/Ensino_tecnico.jpg'},'setting':{'color':'#d0e0e3','moderate_comments':false,'comment_paragraph_plugin_activate':false,'author_name':'Ronald Emerson Scherolt da Costa','allow_members_to_edit':false},'position':10},{'id':103472,'abstract':'\u003Cp\u003EPol\u00edcia Federal, Pol\u00edcia Rodovi\u00e1ria Federal e For\u00e7a Nacional de Seguran\u00e7a P\u00fablica.\u003C/p\u003E','title':'For\u00e7as Federais de Seguran\u00e7a','categories':[{'name':'Seguran\u00e7a P\u00fablica','id':182,'slug':'seguranca-publica','image':null}],'image':{'url':'/image_uploads/dialoga/0000/0031/federais2.png'},'setting':{'color':'','moderate_comments':false,'comment_paragraph_plugin_activate':false,'author_name':'Ronald Emerson Scherolt da Costa','allow_members_to_edit':false},'position':16},{'id':103612,'abstract':'\u003Cp\u003EGarantir \u00e1gua para beber e produzir.\u003C/p\u003E','title':'Cisternas','categories':[{'name':'Redu\u00e7\u00e3o da Pobreza','id':183,'slug':'reducao-da-pobreza','image':null}],'image':{'url':'/image_uploads/dialoga/0000/0039/cisterna_redim.jpg'},'setting':{'color':'#0000ff','moderate_comments':false,'comment_paragraph_plugin_activate':false,'author_name':'Ronald Emerson Scherolt da Costa','allow_members_to_edit':false},'position':20},{'id':103442,'abstract':'\u003Cp\u003EComplemento \u00e0 renda e acompanhamento em educa\u00e7\u00e3o e sa\u00fade.\u003C/p\u003E','title':'Bolsa Fam\u00edlia','categories':[{'name':'Redu\u00e7\u00e3o da Pobreza','id':183,'slug':'reducao-da-pobreza','image':null}],'image':{'url':'/image_uploads/dialoga/0000/0013/bolsa_familia_redim.jpg'},'setting':{'color':'#ff9900','moderate_comments':false,'comment_paragraph_plugin_activate':false,'author_name':'Ronald Emerson Scherolt da Costa','allow_members_to_edit':false},'position':17},{'id':103507,'abstract':'\u003Cp\u003ETecnologia a servi\u00e7o da seguran\u00e7a do cidad\u00e3o.\u003C/p\u003E','title':'Sinesp','categories':[{'name':'Seguran\u00e7a P\u00fablica','id':182,'slug':'seguranca-publica','image':null}],'image':{'url':'/image_uploads/dialoga/0000/0098/sinesp.png'},'setting':{'color':'#00ff00','moderate_comments':false,'comment_paragraph_plugin_activate':false,'author_name':'Ronald Emerson Scherolt da Costa','allow_members_to_edit':false},'position':12},{'id':103683,'abstract':'\u003Cp\u003ESa\u00fade n\u00e3o tem pre\u00e7o.\u003C/p\u003E','title':'Aqui tem Farm\u00e1cia Popular','categories':[{'name':'Sa\u00fade','id':180,'slug':'saude','image':null}],'image':{'url':'/image_uploads/dialoga/0000/0019/saude_nao_tem_preco.jpg'},'setting':{'color':'#e69138','moderate_comments':false,'comment_paragraph_plugin_activate':false,'author_name':'Ronald Emerson Scherolt da Costa','allow_members_to_edit':false},'position':5},{'id':103457,'abstract':'\u003Cp\u003EA\u00e7\u00e3o conjunta e coopera\u00e7\u00e3o transfronteiri\u00e7a.\u003C/p\u003E','title':'Prote\u00e7\u00e3o das Fronteiras','categories':[{'name':'Seguran\u00e7a P\u00fablica','id':182,'slug':'seguranca-publica','image':null}],'image':{'url':'/image_uploads/dialoga/0000/0110/fronteira_redim.jpg'},'setting':{'color':'#a64d79','moderate_comments':false,'comment_paragraph_plugin_activate':false,'author_name':'Ronald Emerson Scherolt da Costa','allow_members_to_edit':false},'position':15},{'id':103494,'abstract':'\u003Cp\u003EDa Educa\u00e7\u00e3o Infantil ao Ensino M\u00e9dio.\u003C/p\u003E','title':'Educa\u00e7\u00e3o B\u00e1sica','categories':[{'name':'Educa\u00e7\u00e3o','id':181,'slug':'educacao','image':null}],'image':{'url':'/image_uploads/dialoga/0000/0076/Educa__o_B_sica.jpg'},'setting':{'color':'#fce5cd','moderate_comments':false,'comment_paragraph_plugin_activate':false,'author_name':'Ronald Emerson Scherolt da Costa','allow_members_to_edit':false},'position':8},{'id':103359,'abstract':'\u003Cp\u003EAcesso a exames e consultas com especialistas.\u003C/p\u003E','title':'Mais Especialidades','categories':[{'name':'Sa\u00fade','id':180,'slug':'saude','image':null}],'image':{'url':'/image_uploads/dialoga/0000/0083/mais_especialidades1.png'},'setting':{'color':'#ea9999','moderate_comments':false,'comment_paragraph_plugin_activate':false,'author_name':'Ronald Emerson Scherolt da Costa','allow_members_to_edit':false},'position':2},{'id':103485,'abstract':'\u003Cp\u003ECaminho para uma educa\u00e7\u00e3o de qualidade.\u003C/p\u003E','title':'Valoriza\u00e7\u00e3o dos Professores','categories':[{'name':'Educa\u00e7\u00e3o','id':181,'slug':'educacao','image':null}],'image':{'url':'/image_uploads/dialoga/0000/0140/valorizacao_professor.jpg'},'setting':{'color':'#ffff00','moderate_comments':false,'comment_paragraph_plugin_activate':false,'author_name':'Ronald Emerson Scherolt da Costa','allow_members_to_edit':false},'position':11},{'id':103416,'abstract':'\u003Cp\u003EEstrutura adequada para atender melhor a popula\u00e7\u00e3o na aten\u00e7\u00e3o b\u00e1sica.\u003C/p\u003E','title':'Melhorar os Postos de Sa\u00fade','categories':[{'name':'Sa\u00fade','id':180,'slug':'saude','image':null}],'image':{'url':'/image_uploads/dialoga/0000/0053/requalif_redim.jpg'},'setting':{'color':'#cc4125','moderate_comments':false,'comment_paragraph_plugin_activate':false,'author_name':'Ronald Emerson Scherolt da Costa','allow_members_to_edit':false},'position':3}]}});
+
+      ArticleService.getHome(function(result){
+        expect(result.article).toBeDefined();
+        expect(result.article.title).toEqual('Dialoga Brasil');
+        expect(result.article.categories).toBeDefined();
+      });
+
+      httpBackend.flush();
+    });
+
+    // it('should return a list of articles', function() {
+
+    //   httpBackend.whenGET('http://login.dialoga.gov.br/api/v1/articles').respond({
+    //     "articles": [
+    //     {
+    //       abstract: "Que exista educação continuada permanente dos profissionais!!",
+    //       author: null,
+    //       body: "",
+    //       categories: [],
+    //       children: [],
+    //       created_at: "2015/08/04 16:36:13",
+    //       end_date: null,
+    //       hits: 0,
+    //       id: 120568,
+    //       image: null,
+    //       parent: {id: 103379,…},
+    //       position: null,
+    //       profile: {identifier: "dialoga", name: "dialoga", id: 19195, created_at: "2015/04/15 09:38:36", image: null},
+    //       setting: {comment_paragraph_plugin_activate: false, author_name: "estacio"},
+    //       start_date: null,
+    //       tag_list: [],
+    //       title: "article_f4f4601c-0f36-e90e-d01a-9871f0bd126b",
+    //       votes_against: 0,
+    //       votes_for: 0,
+    //     }
+    //     ]
+    //   });
+
+    //   ArticleService.getList().then(function(result) {
+    //     console.log('result', result);
+
+    //     expect(result.data.article).toBeDefined();
+    //     expect(result.data.article.title).toEqual('Dialoga Brasil');
+
+    //   });
+
+    //   httpBackend.flush();
+    // });
+  });
+})();
@@ -42,6 +42,7 @@
     AuthUserController.prototype.onClickLogout = function (){
       var vm = this;
+      // TODO: emit event?
       vm.AuthService.logout();
     };
 .custom-breadcrumb {
+
+    .breadcrumb {
+        background: none;
+        padding: 0;
+        margin: 0;
+    }
+
+    .glyphicon {
+        color: #1E3E65;;
+        border: 1px solid #1E3E65;
+        border-radius: 100%;
+        width: 23px;
+        height: 23px;
+        margin: 0;
+        padding: 2px 0 0 3px;
+    }
+
     .breadcrumb > li + li:before {
-        content: '>';
+        content: '\00BB';
     }
     .contraste & .breadcrumb {
 <div class="custom-breadcrumb">
   <ol class="breadcrumb">
-      <li ng-repeat="step in steps | limitTo:(steps.length-1)">
-          <a href="{{step.ncyBreadcrumbLink}}" ng-bind-html="step.ncyBreadcrumbLabel"></a>
-      </li>
-      <li ng-repeat="step in steps | limitTo:-1" class="active">
-          <span ng-bind-html="step.ncyBreadcrumbLabel"></span>
-      </li>
+    <li ng-repeat="step in steps | limitTo:(steps.length-1)">
+      <a href="{{step.ncyBreadcrumbLink}}" ng-if="$index === 0" ng-class="{'item-home': $index === 0}">
+        <span class="glyphicon glyphicon-home" aria-hidden="true"></span>
+      </a>
+      <a href="{{step.ncyBreadcrumbLink}}" ng-if="$index !== 0" ng-class="{'item-home': $index === 0}" ng-bind-html="step.ncyBreadcrumbLabel"></a>
+    </li>
+    <li ng-repeat="step in steps | limitTo:-1" class="active">
+      <span ng-bind-html="step.ncyBreadcrumbLabel"></span>
+    </li>
   </ol>
 </div>
@@ -9,7 +9,7 @@
   function categoryList() {
     /** @ngInject */
-    function CategoryListController($rootScope, ArticleService, $location, $log) {
+    function CategoryListController($rootScope, $location, $log) {
       $log.debug('CategoryListController');
       // alias
@@ -17,33 +17,15 @@
       // dependencies
       vm.$rootScope = $rootScope;
-      vm.ArticleService = ArticleService;
       vm.$location = $location;
       vm.$log = $log;
-      vm.defaultLimit = 6;
       // initialization
       vm.init();
     }
     CategoryListController.prototype.init = function() {
-      var vm = this;
-
-      vm.selectedCategory = null;
-      vm.ArticleService.getCategories(function(categories){
-        vm.categories = categories;
-
-      });
-
-      vm.search = vm.$location.search();
-      if (vm.search && vm.search.tema) {
-        var slug = vm.search.tema;
-        vm.ArticleService.getCategoryBySlug(slug, function(category){
-          vm.selectedCategory = category;
-        }, function(error){
-          vm.$log.error('Error when try to "getCategoryBySlug"', error);
-        });
-      }
+      // var vm = this;
     };
     CategoryListController.prototype.selectCategory = function(category, $event) {
@@ -66,6 +48,10 @@
     var directive = {
       restrict: 'E',
       templateUrl: 'app/components/category-list/category-list.html',
+      scope: {
+        categories: '=',
+        selectedCategory: '@'
+      },
       controller: CategoryListController,
       controllerAs: 'categoryListCtrl',
       bindToController: true
@@ -0,0 +1,293 @@
+(function() {
+  'use strict';
+
+  angular
+    .module('dialoga')
+    .factory('DialogaService', DialogaService);
+
+  /** @ngInject */
+  function DialogaService($rootScope, $sce, API, ArticleService, UtilService, Slug, $log) {
+    $log.debug('DialogaService');
+
+    var service = {
+      getHome: getHome,
+      getAbout: getAbout,
+      getThemes: getThemes,
+      getPrograms: getPrograms,
+      getProgramBySlug: getProgramBySlug,
+      getProgramsRandom: getProgramsRandom,
+      getProposals: getProposals,
+      getProposalsByTopicId: getProposalsByTopicId,
+      getEvents: getEvents,
+      getQuestions: getQuestions,
+      searchProgram: searchProgram,
+      searchProposal: searchProposal,
+    };
+
+    var CACHE = {};
+
+    return service;
+
+    function getHome (cbSuccess, cbError) {
+      if( !!CACHE.home ){
+        cbSuccess(CACHE.home);
+      }else{
+        // load main content
+        ArticleService.getArticleById(API.articleId.home, {
+        'fields[]': ['id','abstract','body','categories','children','children_count','title','image','url']
+        }, function (data){
+          CACHE.home = data;
+
+          _pipeHandleYoutube(data);
+          _pipeHandleSlug(data);
+          _pipeSetAbout(data);
+          _pipeSetThemes(data);
+          _pipeSetPrograms(data);
+
+          cbSuccess(data);
+        }, cbError);
+      }
+    }
+
+    function getAbout (cbSuccess, cbError) {
+      if( !!CACHE.about ){
+        cbSuccess(CACHE.about);
+      }else{
+        // load article content
+        ArticleService.getArticleById(API.articleId.about, {}, function (article){
+          CACHE.about = article;
+
+          cbSuccess(CACHE.about);
+        }, cbError);
+      }
+    }
+
+    function getThemes (cbSuccess, cbError) {
+      if( !!CACHE.themes ){
+        cbSuccess(CACHE.themes);
+      }else{
+        // load main content
+        getHome(function(){
+          if(!CACHE.hasOwnProperty('themes')){
+            throw { name: 'NotFound', message: '"themes" is not defined. "article.categories" was loaded?'};
+          }
+          cbSuccess(CACHE.themes);
+        },cbError);
+      }
+    }
+
+    function getPrograms (cbSuccess, cbError) {
+      if( !!CACHE.programs ){
+        cbSuccess(CACHE.programs);
+      }else{
+        // load main content
+        getHome(function(){
+          if(!CACHE.hasOwnProperty('programs')){
+            throw { name: 'NotFound', message: '"programs" is not defined. "article.children" was handled?'};
+          }
+          cbSuccess(CACHE.programs);
+        },cbError);
+      }
+    }
+
+    function getProgramBySlug (slug, cbSuccess, cbError) {
+      
+      if( !CACHE.programs ){
+        getPrograms(_getProgramBySlug, cbError);
+      } else {
+       _getProgramBySlug(); 
+      }
+
+      function _getProgramBySlug(){
+        var result = CACHE.programs.filter(function filterProgramBySlug (program) {
+          if(angular.equals(program.slug, slug)) {
+            return true;
+          }
+          return false;
+        });
+
+        cbSuccess(result[0]);
+      }
+    }
+
+    function getProgramsRandom (cbSuccess, cbError) {
+      getPrograms(cbSuccess, cbError);
+      // TODO: get endpoint for production
+      // if( !!CACHE.programsRandom ){
+      //   cbSuccess(CACHE.programsRandom);
+      // }else{
+      //   // load article content
+      //   // UtilService.get(API.random_topics, {params: {
+      //   ArticleService.getArticleById(API.articleId.home, {params: {
+      //     'fields[]': [
+      //       'id', 'title', 'slug', 'abstract', 'children_count'],
+      //     'content_type': 'ProposalsDiscussionPlugin::Topic'
+      //   }}).then(function(data){
+      //     CACHE.programsRandom = data;
+
+      //     cbSuccess(data);
+      //   }).catch(function(error){
+      //     cbError(error);
+      //   });
+      // }
+    }
+
+    function getProposals (param, cbSuccess, cbError) {
+      ArticleService.getProposals(param, function (data){
+        CACHE.proposals = data;
+
+        cbSuccess(CACHE.proposals);
+      }, cbError);
+    }
+
+    function getProposalsByTopicId (topicId, params, cbSuccess, cbError) {
+      ArticleService.getProposalsByTopicId(topicId, params, function (data){
+        CACHE.proposals = data;
+
+        cbSuccess(CACHE.proposals);
+      }, cbError);
+    }
+
+    function getEvents (cbSuccess, cbError) {
+      if( !!CACHE.events ){
+        cbSuccess(CACHE.events);
+      }else{
+        // load main content
+        getHome(function(){
+          if(!CACHE.hasOwnProperty('events')){
+            throw { name: 'NotFound', message: '"events" is not defined. "article.categories" was loaded?'};
+          }
+          cbSuccess(CACHE.events);
+        },cbError);
+      }
+    }
+
+    function getQuestions (cbSuccess/*, cbError*/) {
+      if( !!CACHE.questions ){
+        cbSuccess(CACHE.questions);
+      }else{
+        // load content
+        var questions = [];
+
+        CACHE.questions = questions;
+        cbSuccess(CACHE.questions);
+      }
+    }
+
+    function searchProgram (cbSuccess, cbError) {}
+
+    function searchProposal (cbSuccess, cbError) {}
+
+    function _pipeHandleYoutube (data) {
+      var abstract = data.article.abstract;
+
+      abstract = forceIframeParams(abstract);
+      abstract = removeStylefromIframe(abstract);
+
+      data.article.abstract = abstract;
+
+      data.article.abstractTrusted = $sce.trustAsHtml(abstract);
+    }
+
+    function _pipeHandleSlug (data) {
+      // set slug to article
+      if(!data.article.slug){
+        data.article.slug = Slug.slugify(data.article.title);
+      }
+
+      // set slug to programs
+      for (var i = data.article.children.length - 1; i >= 0; i--) {
+        var program = data.article.children[i];
+        if(!program.slug){
+          program.slug = Slug.slugify(program.title);
+        }
+      }
+    }
+
+    function _pipeSetAbout (data) {
+      if(!CACHE.hasOwnProperty('about')){
+        CACHE.about = data.article.body;
+      }
+    }
+
+    function _pipeSetThemes (data) {
+      if(!CACHE.hasOwnProperty('themes')){
+        CACHE.themes = data.article.categories;
+      }
+
+      _pipeCalcColors(data);
+    }
+
+    function _pipeSetPrograms (data) {
+      if(!CACHE.hasOwnProperty('programs')){
+        CACHE.programs = data.article.children;
+        CACHE.programs_count = data.article.children_count;
+      }
+    }
+
+    // Calculate color pallet
+    function _pipeCalcColors (data) {
+      // var darkFactor = 0.15;
+      if(data.article.categories){
+        // var categories = data.article.categories;
+
+        // Handle Category Data
+
+        // Handle Category Colors
+        // for (var i = categories.length - 1; i >= 0; i--) {
+        //   var category = categories[i];
+        //   if(category.color && !category.bgColor){
+        //     category.colorDarker = $window.ColorLuminance(category.color, 0.15);
+        //   }
+        // };
+      }
+    }
+
+    function forceIframeParams(abstract) {
+      var patternIframe = '<iframe src="';
+      var indexOfIframe = abstract.indexOf(patternIframe);
+
+      if (indexOfIframe === -1) {
+        return abstract;
+      }
+
+      var startSrcUrl = indexOfIframe + patternIframe.length;
+      var endSrcUrl = abstract.indexOf('"', startSrcUrl);
+      var srcUrl = abstract.substring(startSrcUrl , endSrcUrl);
+      var resultUrl = srcUrl;
+      var c = (srcUrl.indexOf('?') !== -1) ? '&' : ''; // already have url params. So, append-it
+
+      // enable js api
+      if (srcUrl.indexOf('enablejsapi=1') === -1) {
+        resultUrl += c + 'enablejsapi=1';
+        c = '&'; // force to always use '&' after here
+      }
+
+      // set opaque mode
+      if (srcUrl.indexOf('wmode=opaque') === -1) {
+        resultUrl += c + 'wmode=opaque';
+        // c = '&'; // force to always use '&' after here
+      }
+
+      abstract = abstract.replace(srcUrl, resultUrl);
+
+      return abstract;
+    }
+
+    function removeStylefromIframe (abstract) {
+      var patternIframe = 'style="';
+      var indexOfIframe = abstract.indexOf('<iframe');
+      var indexOfStyleOnIframe = abstract.indexOf('style="', indexOfIframe);
+
+      if (indexOfStyleOnIframe === -1) {
+        return abstract;
+      }
+
+      var startStyleContent = indexOfStyleOnIframe + patternIframe.length;
+      var endStyleContent = abstract.indexOf('"', startStyleContent);
+      var style = abstract.substring(startStyleContent , endStyleContent);
+
+      return abstract.replace(style, '');
+    }
+  }
+})();
 <div class="event-list">
-  <div class="event-tab--trigger" ng-show="!eventListCtrl.isListVisible" ng-click="eventListCtrl.toggleView()">
-    <div class="event-tab--header">
-      <div class="event-tab--icon">
-        <span class="glyphicon glyphicon-calendar" aria-hidden="true"></span>
+
+  <section class="color-theme-common-bg">
+
+    <div class="container">
+      <div class="event-bar--trigger">
+        <div class="event-bar--trigger-top">
+          <div class="col-sm-6">
+            <h1 class="title">
+              <span class="glyphicon glyphicon-calendar icon-circle color-theme-common-fg"></span>
+              Agenda <b>Dialoga Brasil</b>
+            </h1>
+          </div>
+          <div class="col-sm-6">
+            <h2 class="event-bar--trigger-toggle text-right" ng-click="eventListCtrl.toggleView()">
+              <span><b>18</b> bate papos <b>agendados</b></span>
+              <span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span>
+            </h2>
+          </div>
+        </div>
       </div>
-      <div class="event-tab--title">Bate-Papo com ministr@s</div>
     </div>
-    <button class="btn btn-link event-tab--button">
-      <span class="event-tab--total-scheduled">18</span>
-      <span>bate-papos agendados</span>
-      <span class="glyphicon glyphicon-triangle-bottom" aria-hidden="true"></span>
-    </button>
-  </div>
+  </section>
-  <div class="event-list--panel ng-hide" ng-show="eventListCtrl.isListVisible">
-    <div class="event-list--header">
-      <div class="event-list--icon">
-        <div class="glyphicon glyphicon-calendar" aria-hidden="true"></div>
-      </div>
-      <h2 class="event-list--title">Bate-papo com ministr@s</h2>
-      <div class="event-list--minimize">
-        <button type="button" class="btn btn-link" ng-click="eventListCtrl.toggleView()">
-          <span>Minimizar</span>
-          <span class="glyphicon glyphicon-triangle-top" aria-hidden="true"></span>
+  <section class="section-table">
+    <div class="container">
+      <!-- <div class="event-tab--trigger" ng-show="!eventListCtrl.isListVisible" ng-click="eventListCtrl.toggleView()">
+        <div class="event-tab--header">
+          <div class="event-tab--icon">
+            <span class="glyphicon glyphicon-calendar" aria-hidden="true"></span>
+          </div>
+          <div class="event-tab--title">Bate-Papo com ministr@s</div>
+        </div>
+        <button class="btn btn-link event-tab--button">
+          <span class="event-tab--total-scheduled">18</span>
+          <span>bate-papos agendados</span>
+          <span class="glyphicon glyphicon-triangle-bottom" aria-hidden="true"></span>
         </button>
+      </div> -->
+
+      <div class="event-list--panel ng-hide" ng-show="eventListCtrl.isListVisible">
+        <div class="event-list--table-wrapper">
+          <div class="table-responsive">
+            <table class="table event-list--table">
+              <!-- <thead></thead> -->
+              <tbody>
+                <tr>
+                  <td>
+                    <span class="date">dd/mm/aaaa</span>
+                    <span class="separator">-</span>
+                    <span class="time">HH:mm</span>
+                    <span class="separator">-</span>
+                    <span class="description">Mais médicos, Segurança Nacional, SAMU</span>
+                    <button type="button" class="btn color-theme-common-bg" ng-click="eventListCtrl.subscribe('EVENT_ID')">
+                      Inscreva-se
+                      <span class="sr-only">no bate-papo com (ministro) no dia (date) as (hh:mm) horas</span>
+                    </button>
+                    <span class="subscribers">123 inscritos</span>
+                  </td>
+                </tr>
+                <tr>
+                  <td>
+                    <span class="date">dd/mm/aaaa</span>
+                    <span class="separator">-</span>
+                    <span class="time">HH:mm</span>
+                    <span class="separator">-</span>
+                    <span class="description">Mais médicos, Segurança Nacional, SAMU</span>
+                    <button type="button" class="btn color-theme-common-bg">Inscreva-se</button>
+                    <span class="subscribers">123 inscritos</span>
+                  </td>
+                </tr>
+                <tr>
+                  <td>
+                    <span class="date">dd/mm/aaaa</span>
+                    <span class="separator">-</span>
+                    <span class="time">HH:mm</span>
+                    <span class="separator">-</span>
+                    <span class="description">Mais médicos, Segurança Nacional, SAMU</span>
+                    <button type="button" class="btn color-theme-common-bg">Inscreva-se</button>
+                    <span class="subscribers">123 inscritos</span>
+                  </td>
+                </tr>
+                <tr>
+                  <td>
+                    <span class="date">dd/mm/aaaa</span>
+                    <span class="separator">-</span>
+                    <span class="time">HH:mm</span>
+                    <span class="separator">-</span>
+                    <span class="description">Mais médicos, Segurança Nacional, SAMU</span>
+                    <button type="button" class="btn color-theme-common-bg">Inscreva-se</button>
+                    <span class="subscribers">123 inscritos</span>
+                  </td>
+                </tr>
+                <tr>
+                  <td>
+                    <span class="date">dd/mm/aaaa</span>
+                    <span class="separator">-</span>
+                    <span class="time">HH:mm</span>
+                    <span class="separator">-</span>
+                    <span class="description">Mais médicos, Segurança Nacional, SAMU</span>
+                    <button type="button" class="btn color-theme-common-bg">Inscreva-se</button>
+                    <span class="subscribers">123 inscritos</span>
+                  </td>
+                </tr>
+                <tr>
+                  <td>
+                    <span class="date">dd/mm/aaaa</span>
+                    <span class="separator">-</span>
+                    <span class="time">HH:mm</span>
+                    <span class="separator">-</span>
+                    <span class="description">Mais médicos, Segurança Nacional, SAMU</span>
+                    <button type="button" class="btn color-theme-common-bg">Inscreva-se</button>
+                    <span class="subscribers">123 inscritos</span>
+                  </td>
+                </tr>
+              </tbody>
+              <!-- <tfooter></tfooter> -->
+            </table>
+          </div>
+        </div>
       </div>
     </div>
-    <div class="event-list--table-wrapper">
-      <div class="table-responsive">
-        <table class="table event-list--table">
-          <!-- <thead></thead> -->
-          <tbody>
-            <tr>
-              <td>
-                <span class="date">dd/mm/aaaa</span>
-                <span class="separator">-</span>
-                <span class="time">HH:mm</span>
-                <span class="separator">-</span>
-                <span class="description">Mais médicos, Segurança Nacional, SAMU</span>
-                <button type="button" class="btn" ng-click="eventListCtrl.subscribe('EVENT_ID')">
-                  Inscreva-se
-                  <span class="sr-only">no bate-papo com (ministro) no dia (date) as (hh:mm) horas</span>
-                </button>
-                <span class="subscribers">123 inscritos</span>
-              </td>
-            </tr>
-            <tr>
-              <td>
-                <span class="date">dd/mm/aaaa</span>
-                <span class="separator">-</span>
-                <span class="time">HH:mm</span>
-                <span class="separator">-</span>
-                <span class="description">Mais médicos, Segurança Nacional, SAMU</span>
-                <button type="button" class="btn">Inscreva-se</button>
-                <span class="subscribers">123 inscritos</span>
-              </td>
-            </tr>
-            <tr>
-              <td>
-                <span class="date">dd/mm/aaaa</span>
-                <span class="separator">-</span>
-                <span class="time">HH:mm</span>
-                <span class="separator">-</span>
-                <span class="description">Mais médicos, Segurança Nacional, SAMU</span>
-                <button type="button" class="btn">Inscreva-se</button>
-                <span class="subscribers">123 inscritos</span>
-              </td>
-            </tr>
-            <tr>
-              <td>
-                <span class="date">dd/mm/aaaa</span>
-                <span class="separator">-</span>
-                <span class="time">HH:mm</span>
-                <span class="separator">-</span>
-                <span class="description">Mais médicos, Segurança Nacional, SAMU</span>
-                <button type="button" class="btn">Inscreva-se</button>
-                <span class="subscribers">123 inscritos</span>
-              </td>
-            </tr>
-            <tr>
-              <td>
-                <span class="date">dd/mm/aaaa</span>
-                <span class="separator">-</span>
-                <span class="time">HH:mm</span>
-                <span class="separator">-</span>
-                <span class="description">Mais médicos, Segurança Nacional, SAMU</span>
-                <button type="button" class="btn">Inscreva-se</button>
-                <span class="subscribers">123 inscritos</span>
-              </td>
-            </tr>
-            <tr>
-              <td>
-                <span class="date">dd/mm/aaaa</span>
-                <span class="separator">-</span>
-                <span class="time">HH:mm</span>
-                <span class="separator">-</span>
-                <span class="description">Mais médicos, Segurança Nacional, SAMU</span>
-                <button type="button" class="btn">Inscreva-se</button>
-                <span class="subscribers">123 inscritos</span>
-              </td>
-            </tr>
-          </tbody>
-          <!-- <tfooter></tfooter> -->
-        </table>
-      </div>
-    </div>
-  </div>
+  </section>
 </div>
 .event-list {
     position: relative;
-    background-color: #eeeeee;
     .contraste & {
         background-color: #262626;
     }
+    .section-table {
+        background-color: #e1e1e1;
+    }
+
     .event-list--panel {
         height: 310px;
-        border: 1px solid #333333;
         padding: 20px;
         margin: 20px 0;
         line-height: 20px;
@@ -19,25 +21,25 @@
             line-height: 0px;
         }
-        .event-list--header {
-            border-bottom: 1px solid #333333;
-        }
+        // .event-list--header {
+        //     border-bottom: 1px solid #333333;
+        // }
-        .event-list--icon {
-            font-size: 25px;
-            display: inline-block;
-        }
+        // .event-list--icon {
+        //     font-size: 25px;
+        //     display: inline-block;
+        // }
-        .event-list--title {
-            margin: 0 10px;
-            display: inline-block;
-        }
+        // .event-list--title {
+        //     margin: 0 10px;
+        //     display: inline-block;
+        // }
-        .event-list--minimize {
-            display: inline-block;
-            float: right;
-            width: 100px;
-        }
+        // .event-list--minimize {
+        //     display: inline-block;
+        //     float: right;
+        //     width: 100px;
+        // }
     }
     .event-tab--trigger {
@@ -68,14 +70,51 @@
         }
     }
+    .event-bar--trigger {
+        color: #fff;
+
+        h1 {
+            margin-bottom: 20px;
+        }
+
+        .icon-circle {
+            font-size: 28px;
+            border-radius: 100%;
+            padding: 8px 8px 8px 10px;
+            background-color: #fff;
+        }
+
+        &-toggle {
+            .glyphicon {
+                position: relative;
+                top: 5px;
+            }
+        }
+    }
+
     .table-responsive {
-        height: 250px;
+        width: 100%;
+        height: 240px;
         overflow-y: scroll;
+
+        .btn {
+            color: #e1e1e1;
+            text-transform: uppercase;
+            font-weight: bold;
+        }
+
+        tr > td {
+            border-top: 1px solid #ccc;
+        }
+        tr:last-child > td {
+            border-bottom: 1px solid #ccc;
+        }
     }
     .event-tab--icon {
         font-size: 25px;
     }
+
     .event-tab--title {
         font-weight: bold;
     }
-<nav id="navigation" class="header-navbar navbar navbar-static-top" role="navigation">
-  <div class="navbar-header">
-    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false">
-      <span class="sr-only">Alternar menu de navegação</span>
-      <span class="icon-bar" aria-hidden="true"></span>
-      <span class="icon-bar" aria-hidden="true"></span>
-      <span class="icon-bar" aria-hidden="true"></span>
-    </button>
-    <a class="navbar-brand" ui-sref="inicio">
-      <img src="/assets/images/logo.png" alt="Dialoga Brasil | O país fica melhor quando você participa" />
-      <!-- <span class="glyphicon glyphicon-home"></span> Início -->
-    </a>
-  </div>
+<div class="app-navbar">
+  <nav id="navigation" class="header-navbar navbar navbar-static-top" role="navigation">
+    <div class="navbar-header">
+      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false">
+        <span class="sr-only">Alternar menu de navegação</span>
+        <span class="icon-bar" aria-hidden="true"></span>
+        <span class="icon-bar" aria-hidden="true"></span>
+        <span class="icon-bar" aria-hidden="true"></span>
+      </button>
+      <a class="navbar-brand" ui-sref="inicio">
+        <img src="/assets/images/logo.png" alt="Dialoga Brasil | O país fica melhor quando você participa" />
+        <!-- <span class="glyphicon glyphicon-home"></span> Início -->
+      </a>
+    </div>
-  <div id="navbar-collapse" class="collapse navbar-collapse">
-    <ul class="nav navbar-nav">
-      <li><a ui-sref="sobre">Sobre</a></li>
-      <li><a ui-sref="programas">Programas</a></li>
-      <li><a ui-sref="propostas">Propostas</a></li>
-      <!-- <li><a ui-sref="ranking">Ranking</a></li> -->
-      <li><a ui-sref="duvidas">Dúvidas</a></li>
-      <!-- <li><a ui-sref="respostas">Respostas</a></li> -->
-    </ul>
-  </div>
-</nav>
+    <div id="navbar-collapse" class="collapse navbar-collapse">
+      <ul class="nav navbar-nav navbar-right">
+        <li ui-sref-active="active"><a ui-sref="sobre">Sobre</a></li>
+        <li ui-sref-active="active"><a ui-sref="programas">Programas</a></li>
+        <li ui-sref-active="active"><a ui-sref="propostas">Propostas</a></li>
+        <li ui-sref-active="active"><a ui-sref="ranking">Ranking</a></li>
+        <li ui-sref-active="active"><a ui-sref="duvidas">Dúvidas</a></li>
+        <!-- <li ui-sref-active="active"><a ui-sref="respostas">Respostas</a></li> -->
+        <li role="separator" class="divider"><span>|</span></li>
+        <li class="dropdown">
+          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Compartilhar <span class="icon-circle"><span class="glyphicon glyphicon-share-alt"></span></span></a>
+          <ul class="dropdown-menu">
+            <li>
+              <a social-facebook custom-url="http://dialoga.gov.br" title="Compartilhar no Facebook">
+                <span class="icon icon-social-facebook"></span>
+                <span class="sr-only">Compartilhar no Facebook</span>
+              </a>
+            </li>
+            <li>
+              <a social-twitter custom-url="http://dialoga.gov.br" status="This status is #{{ vm.status }}" title="Compartilhar no Twitter">
+                <span class="icon icon-social-twitter"></span>
+                <span class="sr-only">Compartilhar no Twitter</span>
+              </a>
+            </li>
+            <li>
+              <a social-gplus custom-url="http://dialoga.gov.br" title="Compartilhar no Google Plus">
+                <span class="icon icon-social-google-plus"></span>
+                <span class="sr-only">Compartilhar no Google Plus</span>
+              </a>
+            </li>
+            <!-- <li>
+              <a href="whatsapp://send?text=http%3A%2F%2Fdialoga.gov.br" target="_blank" title="Compartilhar no WhatsApp">
+                <span class="icon icon-social-whatsapp"></span>
+                <span class="sr-only">Compartilhar no WhatsApp</span>
+              </a>
+            </li> -->
+            <li>
+              <a href="mailto:contato@dialoga.gov.br?subject=Conheça o Dialoga Brasil" title="Enviar por email">
+                <span class="icon icon-social-whatsapp"></span>
+                <span class="sr-only">Enviar por email</span>
+              </a>
+            </li>
+          </ul>
+        </li>
+      </ul>
+    </div>
+  </nav>
+</div>
-.header-navbar {
+.app-navbar {
+
+    border-bottom: 2px solid #f1f1f1;
+    margin-bottom: 20px;
+
+    .navbar {
+        margin-bottom: 0;
+        border: none;
+    }
     .navbar-brand {
         height: auto;
@@ -14,19 +22,62 @@
         }
     }
-    .navbar-nav a {
-        padding-top: 30px;
-        padding-bottom: 30px;
-        text-transform: uppercase;
-        color: #03316f;
+    .navbar-nav .divider span {
+        padding: 0 0 10px 0;
+        margin: 53px 10px 0 10px;
+        display: block;
+
+        @media screen and (max-width: 768px) {
+            display: none;
+        }
+    }
+
+    .navbar-nav > li {
-        -webkit-transition: all 0.2s ease-in-out;
-        -moz-transition: all 0.2s ease-in-out;
-        -o-transition: all 0.2s ease-in-out;
-        transition: all 0.2s ease-in-out;
+        & > a {
+            padding: 0 0 10px 0;
+            margin: 55px 10px 0 10px;
+            text-transform: uppercase;
+            color: #616161;
+            font-weight: bold;
-        .contraste & {
-            color: #fff;
+            &:hover,
+            &:focus {
+                background: none;
+            }
+
+            .contraste & {
+                color: #fff;
+            }
+        }
+
+        &.active > a {
+            border-bottom: 3px solid #77BB34;
+
+            @media screen and (max-width: 768px) {
+                border: none;
+                background-color: #eee;
+                padding: 10px 0 10px 0px;
+            }
+        }
+
+        .dropdown-menu {
+            min-width: 190px;
+
+            li {
+                float: left;
+                padding: 0;
+                margin: 0;
+                width: 45px;
+
+                & > a {
+                    padding: 0;
+                }
+
+                &:first-child {
+                    margin-left: 5px;
+                }
+            }
         }
     }
@@ -37,8 +88,11 @@
     .contraste & {
         .nav > li > a:hover,
         .nav > li > a:focus {
-            color: #000;
+            color: #fff;
         }
+        .active a {
+            border-bottom-color: #fff;
+        }
     }
 }
@@ -1,316 +0,0 @@
-(function() {
-  'use strict';
-
-  angular
-    .module('dialoga')
-    .directive('programaList', programaList);
-
-  /** @ngInject */
-  function programaList() {
-
-    /** @ngInject */
-    function ProgramaListController($scope, $element, $location, $filter, $log) {
-      $log.debug('ProgramaListController');
-
-      // alias
-      var vm = this;
-
-      // dependencies
-      vm.$scope = $scope;
-      vm.$element = $element;
-      vm.$location = $location;
-      vm.$filter = $filter;
-      vm.$log = $log;
-      vm.defaultLimit = 6;
-
-      // initialization
-      vm.init();
-    }
-
-    ProgramaListController.prototype.init = function() {
-      var vm = this;
-
-      if (!vm.article) {
-        vm.$log.warn('no article to display. Tip: use a ng-if before use this directive');
-        return;
-      }
-
-      vm.categories = vm.article.categories;
-      vm.programs = vm.article.children;
-      vm.orderCriteries = [
-        { label: 'Título', name: 'titulo' },
-        { label: 'Tema', name: 'tema' },
-        { label: 'Aleatório', name: 'aleatorio' }
-      ];
-
-      vm.filtredProgramList = vm.getFiltredPrograms();
-      vm.search = vm.$location.search();
-
-      // Add initial values for the filter
-      vm.query = (vm.search && vm.search.filtro) ? vm.search.filtro : null;
-      vm.limitTo = (vm.search && vm.search.limite) ? parseInt(vm.search.limite, 10) : vm.defaultLimit;
-      vm.categoryFilter = (vm.search && vm.search.tema) ? vm.getCategoryBySlug(vm.search.tema) : null;
-      vm.orderCriteria = (vm.search && vm.search.ordem) ? { name: vm.search.ordem } : null;
-      vm.reverse = (vm.search && vm.search.reverso) ? true : false;
-
-      if (!angular.equals({}, vm.search)) {
-        var $el = vm.$element;
-        angular.element('body').animate({scrollTop: $el.offset().top}, 'slow');
-      }
-
-      // update window location params
-      vm.$scope.$watch('vm.query', function(newValue/*, oldValue*/) {
-        vm.search.filtro = newValue ? newValue : null;
-        vm.$location.search('filtro', vm.search.filtro);
-        if(vm.search.filtro){
-          vm.limitTo = vm.programs.length;
-        }else{
-          vm.limitTo = vm.defaultLimit;
-        }
-        vm.filtredProgramList = vm.getFiltredPrograms();
-      });
-
-      vm.$scope.$watch('vm.limitTo', function(newValue/*, oldValue*/) {
-        vm.search.limite = (newValue && newValue !== vm.defaultLimit)  ? newValue : null;
-        vm.$location.search('limite', vm.search.limite);
-        vm.filtredProgramList = vm.getFiltredPrograms();
-      });
-
-      vm.$scope.$watch('vm.categoryFilter', function(newValue/*, oldValue*/) {
-        vm.search.tema = newValue ? newValue.slug : null;
-        vm.$location.search('tema', vm.search.tema);
-        if(vm.search.tema){
-          vm.limitTo = vm.programs.length;
-        }
-        vm.filtredProgramList = vm.getFiltredPrograms();
-      });
-
-      vm.$scope.$watch('vm.orderCriteria', function(newValue/*, oldValue*/) {
-        vm.search.ordem = (newValue && newValue.name) ? newValue.name : null;
-        vm.$location.search('ordem', vm.search.ordem);
-        vm.filtredProgramList = vm.getFiltredPrograms();
-      });
-
-      vm.$scope.$watch('vm.reverse', function(newValue/*, oldValue*/) {
-        vm.search.reverso = newValue ? newValue : null;
-        vm.$location.search('reverso', vm.search.reverso);
-        vm.filtredProgramList = vm.getFiltredPrograms();
-      });
-
-    };
-
-    ProgramaListController.prototype.resetFilterValues = function() {
-      var vm = this;
-
-      vm.query = null;
-      vm.limitTo = vm.defaultLimit;
-      vm.categoryFilter = null;
-      vm.orderCriteria = null;
-    };
-
-    ProgramaListController.prototype.getIconClasses = function(category) {
-      var vm = this;
-
-      vm.$log.debug('[TODO] getIconClasses of category:', category);
-      return 'glyphicon glyphicon-exclamation-sign';
-    };
-
-    ProgramaListController.prototype.getCategoryBySlug = function(categorySlug) {
-      var vm = this;
-      var result = null;
-
-      angular.forEach(vm.categories, function(value/*, key*/) {
-        if (value.slug === categorySlug) {
-          result = value;
-        }
-      });
-
-      return result;
-    };
-
-    ProgramaListController.prototype.filterByCategory = function(category, $event) {
-      var vm = this;
-
-      $event.stopPropagation();
-
-      if (category !== vm.categoryFilter) {
-
-        // selected new filter
-        vm.categoryFilter = category;
-      } else {
-        vm.categoryFilter = null;
-      }
-    };
-
-    ProgramaListController.prototype.showAll = function($event) {
-      var vm = this;
-
-      $event.stopPropagation();
-
-      vm.resetFilterValues();
-      vm.limitTo = vm.programs.length;
-    };
-
-    ProgramaListController.prototype.getFiltredPrograms = function() {
-      var vm = this;
-
-      var input = vm.programs;
-      var output = input;
-      var query = vm.query;
-      var categoryFilter = vm.categoryFilter;
-      var orderCriteria = vm.orderCriteria ? vm.orderCriteria : { name : 'aleatorio'};
-      var filter = vm.$filter('filter');
-      var orderBy = vm.$filter('orderBy');
-      var limitTo = vm.$filter('limitTo');
-      var limit = vm.limitTo ? vm.limitTo : 4;
-
-      if (categoryFilter) {
-        output = _filterByCategory(output, categoryFilter);
-      }
-
-      if (query) {
-        output = filter(output, query, false);
-      }
-
-      switch (orderCriteria.name) {
-        case 'titulo':
-          output = orderBy(output, 'title', vm.reverse);
-          break;
-        case 'tema':
-          output = orderBy(output, 'categories[0].name', vm.reverse);
-          break;
-        case 'more_participants':
-          vm.$log.info('Criteria not handled yet: ', orderCriteria);
-          break;
-        case 'aleatorio':
-          // shuffling
-          // if (!vm._isShuffled){
-          output = vm.filterShuffle(output);
-          //   vm._isShuffled = true;
-          // }
-
-          if (vm.reverse) {
-            output = output.slice().reverse();
-          }
-
-          break;
-        default:
-          vm.$log.warn('Criteria not matched: ', orderCriteria);
-          break;
-      }
-
-      output = limitTo(output, limit);
-
-      return output;
-    };
-
-    ProgramaListController.prototype.filterShuffle = function(input) {
-      var result = [];
-      var resultByCategory = {};
-
-      // divide by categories
-      for (var i = 0; i < input.length; i++) {
-        var program = input[i];
-        var categorySlug = program.categories[0].slug;
-
-        if (!resultByCategory[categorySlug]) {
-          resultByCategory[categorySlug] = [];
-        }
-
-        resultByCategory[categorySlug].push(program);
-      }
-
-      // shuffle each array
-      var prop = null;
-      var categoryWithPrograms = null;
-      for (prop in resultByCategory) {
-        if (resultByCategory.hasOwnProperty(prop)) {
-          categoryWithPrograms = resultByCategory[prop];
-          resultByCategory[prop] = shuffle(categoryWithPrograms);
-        }
-      }
-
-      // Concat all into result array
-      // > while has program at Lists on resultByCategory
-      var hasProgram = true;
-      while (hasProgram) {
-
-        var foundProgram = false;
-        // each categoryList with array of program
-        prop = null;
-        categoryWithPrograms = null;
-        for (prop in resultByCategory) {
-
-          if (resultByCategory.hasOwnProperty(prop)) {
-            categoryWithPrograms = resultByCategory[prop];
-
-            if (categoryWithPrograms.length > 0) {
-              var pivotProgram = categoryWithPrograms.pop();
-              result.push(pivotProgram);
-              foundProgram = true;
-            }
-          }
-        }
-
-        if (!foundProgram) {
-          hasProgram = false;
-        }
-      }
-
-      return result;
-    };
-
-    var directive = {
-      restrict: 'E',
-      templateUrl: 'app/components/programas/programas.html',
-      scope: {
-        article: '='
-      },
-      controller: ProgramaListController,
-      controllerAs: 'vm',
-      bindToController: true
-    };
-
-    return directive;
-  }
-
-  function _filterByCategory (input, category) {
-    input = input || [];
-
-    if (!category) {
-      // no filter
-      return input;
-    }
-
-    var out = [];
-    for (var i = 0; i < input.length; i++) {
-      var program = input[i];
-      if (program.categories[0].slug === category.slug) {
-        out.push(program);
-      }
-    }
-
-    return out;
-  }
-
-  // -> Fisher–Yates shuffle algorithm
-  function shuffle (array) {
-    var currentIndex = array.length, temporaryValue, randomIndex ;
-
-    // While there remain elements to shuffle...
-    while (0 !== currentIndex) {
-
-      // Pick a remaining element...
-      randomIndex = Math.floor(Math.random() * currentIndex);
-      currentIndex -= 1;
-
-      // And swap it with the current element.
-      temporaryValue = array[currentIndex];
-      array[currentIndex] = array[randomIndex];
-      array[randomIndex] = temporaryValue;
-    }
-
-    return array;
-  }
-
-})();
@@ -1,32 +0,0 @@
-(function() {
-  'use strict';
-
-  describe('program directive', function() {
-    var compile, scope, directiveElem;
-
-    beforeEach(function(){
-      module('dialoga');
-
-      inject(function($compile, $rootScope){
-        compile = $compile;
-        scope = $rootScope.$new();
-        // mock article
-        scope.article = {};
-      });
-
-      directiveElem = getCompiledElement();
-    });
-
-    function getCompiledElement(){
-      var element = compile(angular.element('<programa-list></programa-list>'))(scope);
-      var compiledElement = compile(element)(scope);
-      scope.$digest();
-      return compiledElement;
-    }
-
-    it('ensure exist only one id "lista-de-programas"', function() {});
-
-    it('should show default programs, one each category', function() {});
-
-  });
-})();
@@ -0,0 +1,71 @@
+(function() {
+  'use strict';
+
+  angular
+    .module('dialoga')
+    .directive('proposalCarousel', proposalCarousel);
+
+  /** @ngInject */
+  function proposalCarousel() {
+
+    /** @ngInject */
+    function ProposalCarouselController($scope, $element, $timeout, $log) {
+      $log.debug('ProposalCarouselController');
+
+      var vm = this;
+      vm.$scope = $scope;
+      vm.$element = $element;
+      vm.$timeout = $timeout;
+      vm.$log = $log;
+
+      vm.init();
+    }
+
+    ProposalCarouselController.prototype.init = function () {
+      // initial values
+      var vm = this;
+
+      if(!vm.proposals){
+        throw { name: 'NotDefined', message: 'The attribute "proposals" is undefined.'};
+      }
+
+      vm.activeIndex = 0;
+      vm.loading = false;
+      vm.proposalsLength = vm.proposals.length;
+    };
+
+    ProposalCarouselController.prototype.swipeLeft = function () {
+      var vm = this;
+
+      vm.activeIndex = (vm.activeIndex < vm.proposalsLength - 1) ? ++vm.activeIndex : 0;
+    };
+
+    ProposalCarouselController.prototype.swipeRight = function () {
+      var vm = this;
+
+      vm.activeIndex = (vm.activeIndex > 0) ? --vm.activeIndex : vm.proposalsLength - 1;
+    };
+
+    ProposalCarouselController.prototype.showProposals = function () {
+      var vm = this;
+
+      // notify parents - handled by parents
+      vm.$scope.$emit('proposal-carousel:toProposals');
+    };
+
+    var directive = {
+      restrict: 'E',
+      templateUrl: 'app/components/proposal-carousel/proposal-carousel.html',
+      scope: {
+        proposals: '='
+      },
+      controller: ProposalCarouselController,
+      controllerAs: 'vm',
+      bindToController: true
+    };
+
+
+    return directive;
+  }
+
+})();
@@ -0,0 +1,33 @@
+<div class="proposal-carousel">
+  <div ng-if="vm.proposals">
+    <div class="proposal-carousel-top color-theme-bg">
+      <div class="proposal-carousel-position" ng-repeat="proposal in vm.proposals">
+        <span ng-show="vm.activeIndex === $index">{{::($index+1)}}º</span>
+        <span ng-show="vm.activeIndex === $index">Lugar</span>
+      </div>
+      <div class="proposal-carousel-top-triggers" ng-if="vm.proposals">
+        <ul class="list-inline">
+          <li class="item-dot" ng-repeat="proposal in vm.proposals">
+            <button type="button" ng-class="{'active': vm.activeIndex === $index}" ng-click="vm.switchProposal($index)" title="Apersentar proposta na posição {{$index}}"></button>
+          </li>
+        </ul>
+      </div>
+    </div>
+    <div class="proposal-carousel-middle" ng-swipe-left="vm.swipeLeft()" ng-swipe-right="vm.swipeRight()">
+      <div ng-repeat="proposal in vm.proposals" class="animation-swipe">
+        <div class="content">
+          <div ng-show="vm.activeIndex === $index">{{::proposal.abstract}}</div>
+        </div>
+        <div class="proposal-carousel-middle-watermark" ng-show="vm.activeIndex === $index">
+          <span>{{::($index+1)}}º</span>
+        </div>
+      </div>
+    </div>
+    <div class="proposal-carousel-bottom color-theme-common-bg" ng-click="vm.showProposals()">
+      <div>Veja as propostas mais vortadas</div>
+      <div class="proposal-carousel-bottom-icon">
+        <span class="glyphicon glyphicon-chevron-down pull-right color-theme-common-fg"></span>
+      </div>
+    </div>
+  </div>
+</div>
@@ -0,0 +1,86 @@
+.proposal-carousel {
+    background-color: #f1f1f1;
+    border-radius: 5px;
+    overflow: hidden;
+
+    &-top {
+        position: relative;
+        color: #fff;
+        font-weight: bold;
+        font-size: 25px;
+        padding: 20px 15px;
+
+        &-triggers {
+            position: absolute;
+            right: 15px;
+            top: 20px;
+
+            button {
+                border: 1px solid #fff;
+                border-radius: 100%;
+                width: 15px;
+                height: 15px;
+                margin-right: 5px;
+                background-color: transparent;
+
+                cursor: pointer;
+
+                &.active {
+                    background-color: #fff;
+                }
+            }
+        }
+    }
+
+    &-middle {
+        position: relative;
+        padding: 25px 30px;
+        min-height: 200px;
+        // cursor: pointer;
+        -webkit-user-select: none;
+        -khtml-user-select: none;
+        -moz-user-select: none;
+        -ms-user-select: none;
+        user-select: none;
+
+        .content {
+            position: relative;
+            z-index: 2;
+        }
+
+        &-watermark {
+            position: absolute;
+            bottom: 1px;
+            left: -5px;
+            color: #ddd;
+            font-size: 150px;
+            font-weight: bold;
+            line-height: 116px;
+            z-index: 1;
+
+        }
+    }
+
+    &-bottom {
+        position: relative;
+        color: #fff;
+        padding: 10px;
+        font-weight: bold;
+        cursor: pointer;
+        z-index: 10;
+
+        &-icon {
+            position: absolute;
+            top: 10px;
+            right: 15px;
+
+            .glyphicon {
+                position: relative;
+                top: -2px;
+                background-color: #fff;
+                padding: 6px 5px 5px 6px;
+                border-radius: 100%;
+            }
+        }
+    }
+}
@@ -0,0 +1,81 @@
+(function() {
+  'use strict';
+
+  angular
+    .module('dialoga')
+    .directive('proposalList', proposalList);
+
+  /** @ngInject */
+  function proposalList() {
+
+    /** @ngInject */
+    function ProposalListController(ArticleService, $scope, $element, $timeout, $log) {
+      $log.debug('ProposalListController');
+
+      var vm = this;
+      vm.ArticleService = ArticleService;
+      vm.$scope = $scope;
+      vm.$element = $element;
+      vm.$timeout = $timeout;
+      vm.$log = $log;
+
+      vm.init();
+
+      vm.loadData();
+    }
+
+    ProposalListController.prototype.init = function () {
+      // initial values
+      var vm = this;
+
+      if(!vm.proposals){
+        throw { name: 'NotDefined', message: 'The attribute "proposals" is undefined.'};
+      }
+
+      if(!vm.per_page){
+        vm.per_page = 5;
+      }
+
+      vm.proposalsLength = vm.proposals.length;
+    };
+
+    ProposalListController.prototype.loadData = function () {
+      // async values
+      var vm = this;
+
+      // requeue to wait until DOM be created
+      vm.$timeout(function(){
+        attachPopover.call(vm);
+      }, 100);
+    };
+
+    function attachPopover(){
+      var vm = this;
+
+      vm.popover = angular.element(vm.$element.find('.btn-question'));
+      vm.popover.popover({
+        html: true,
+        placement: 'bottom',
+        animation: true,
+        title: 'Regra de posição das propostas',
+        content: '<p>É calculada pelo saldo de interações das propostas (curtidas - não curtidas) dividido pela diferença de exibições entre elas.</p><p>O objetivo dessa correção é compensar o saldo de interações e a diferença de exibições das propostas que não tiveram muitas oportunidades de visualização ou das propostas que tiveram mais oportunidades de visualização que a média.</p><p>Com essa correção, é possível comparar propostas que entraram em diferentes momentos, durante todo o período da consulta.</p>'
+      });
+    }
+
+    var directive = {
+      restrict: 'E',
+      templateUrl: 'app/components/proposal-list/proposal-list.html',
+      scope: {
+        proposals: '=',
+        per_page: '='
+      },
+      controller: ProposalListController,
+      controllerAs: 'vm',
+      bindToController: true
+    };
+
+
+    return directive;
+  }
+
+})();
@@ -0,0 +1,45 @@
+<div class="proposal-list">
+
+  <div class="table-responsive" ng-if="vm.loading">
+    <div class="table-responsive">Carregando...</div>
+  </div>
+  <div class="table-responsive" ng-if="!vm.loading && vm.proposals">
+    <table class="table table-striped">
+      <thead>
+        <tr>
+          <th>
+            Colocação
+            <button type="button" class="btn btn-link btn-question">?</button>
+          </th>
+          <th>123 PROPOSTAS</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr ng-repeat="proposal in vm.proposals">
+
+          <td class="color-theme-fg">
+            <span class="position">{{::($index+1)}}º</span>
+          </td>
+          <td>
+            <div class="row">
+              <div class="col-xs-12">
+                <span class="abstract">{{proposal.abstract}}</span>
+              </div>
+            </div>
+            <div class="row row-actions">
+              <div class="col-md-9">
+                <button type="button" class="btn btn-link btn-rate color-theme-common-fg">
+                  Avalie esta proposta
+                  <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
+                </button>
+              </div>
+              <div class="col-md-3">
+                <proposal-stats views="{{::proposal.hits}}" up="{{::proposal.votes_for}}" down="{{::proposal.votes_against}}"></proposal-stats>
+              </div>
+            </div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</div>
@@ -0,0 +1,94 @@
+.proposal-list {
+    table {
+        border-radius: 4px;
+        overflow: hidden;
+    }
+
+    thead {
+        th{
+            color: #fff;
+            background-color: #606060;
+            &:first-child {
+                background-color: #484848;
+                text-align: right;
+                width: 160px;
+                padding-right: 20px;
+            }
+        }
+
+        .btn-question {
+            color: #484848;
+            background-color: #fff;
+            display: inline-block;
+            text-align: center;
+            width: 22px;
+            height: 22px;
+            margin-left: 10px;
+            padding: 0;
+            border-radius: 100%;
+        }
+
+        .popover {
+            color: #484848;
+        }
+    }
+
+    tbody {
+        tr {
+            background-color: #fff;
+        }
+
+        td {
+            &:first-child {
+                font-size: 22px;
+                font-weight: bold;
+                padding: 0;
+                text-align: right;
+            }
+        }
+
+        .position {
+            display: block;
+            width: 100%;
+            margin: 20px 0;
+            padding: 5px 20px;
+            border-top-right-radius: 4px;
+            border-bottom-right-radius: 4px;
+        }
+    }
+
+    .abstract {
+        color: #393939;
+        font-size: 18px;
+    }
+
+    .row-actions {
+        padding-top: 20px;
+    }
+
+    .btn-rate {
+        padding: 0;
+        font-size: 20px;
+        font-weight: bold;
+        text-decoration: blink;
+    }
+
+    // override bootstrap
+    .table-striped > tbody > tr:nth-of-type(odd) {
+        // impar
+        background-color: #eaeaea;
+
+        .position {
+            background-color: #fff;
+        }
+    }
+
+    .table-striped > tbody > tr:nth-of-type(even) {
+        // par
+        background-color: #fff;
+
+        .position {
+            background-color: #eaeaea;
+        }
+    }
+}
@@ -1,90 +0,0 @@
-.proposal-ranking {
-    // both: carousel and list
-}
-
-.proposal-ranking--carousel {
-    background-color: #f1f1f1;
-    border-radius: 5px;
-    overflow: hidden;
-
-    &-top {
-        position: relative;
-        color: #fff;
-        font-weight: bold;
-        font-size: 25px;
-        padding: 20px 15px;
-
-
-        &-triggers {
-            position: absolute;
-            right: 15px;
-            top: 20px;
-
-            button {
-                border: 1px solid #fff;
-                border-radius: 100%;
-                width: 15px;
-                height: 15px;
-                margin-right: 5px;
-                background-color: transparent;
-
-                cursor: pointer;
-
-                &.active {
-                    background-color: #fff;
-                }
-            }
-        }
-    }
-
-    &-middle {
-        position: relative;
-        padding: 25px 30px;
-        cursor: pointer;
-        -webkit-user-select: none;
-        -khtml-user-select: none;
-        -moz-user-select: none;
-        -ms-user-select: none;
-        user-select: none;
-
-        .content {
-            position: relative;
-            z-index: 2;
-        }
-
-        &-watermark {
-            position: absolute;
-            bottom: 1px;
-            left: -5px;
-            color: #ddd;
-            font-size: 150px;
-            font-weight: bold;
-            line-height: 116px;
-            z-index: 1;
-
-        }
-    }
-
-    &-bottom {
-        position: relative;
-        color: #fff;
-        padding: 10px;
-        font-weight: bold;
-        cursor: pointer;
-        z-index: 10;
-
-        &-icon {
-            position: absolute;
-            top: 10px;
-            right: 15px;
-
-            .glyphicon {
-                position: relative;
-                top: -2px;
-                background-color: #fff;
-                padding: 6px 5px 5px 6px;
-                border-radius: 100%;
-            }
-        }
-    }
-}
@@ -1,98 +0,0 @@
-.proposal-ranking {
-    // both: carousel and list
-}
-
-.proposal-ranking--list {
-    table {
-        border-radius: 4px;
-        overflow: hidden;
-    }
-
-    thead {
-        th{
-            color: #fff;
-            background-color: #606060;
-            &:first-child {
-                background-color: #484848;
-                text-align: right;
-                width: 160px;
-                padding-right: 20px;
-            }
-        }
-
-        .btn-question {
-            color: #484848;
-            background-color: #fff;
-            display: inline-block;
-            text-align: center;
-            width: 22px;
-            height: 22px;
-            margin-left: 10px;
-            padding: 0;
-            border-radius: 100%;
-        }
-
-        .popover {
-            color: #484848;
-        }
-    }
-
-    tbody {
-        tr {
-            background-color: #fff;
-        }
-
-        td {
-            &:first-child {
-                font-size: 22px;
-                font-weight: bold;
-                padding: 0;
-                text-align: right;
-            }
-        }
-
-        .position {
-            display: block;
-            width: 100%;
-            margin: 20px 0;
-            padding: 5px 20px;
-            border-top-right-radius: 4px;
-            border-bottom-right-radius: 4px;
-        }
-    }
-
-    .abstract {
-        color: #393939;
-        font-size: 18px;
-    }
-
-    .row-actions {
-        padding-top: 20px;
-    }
-
-    .btn-rate {
-        padding: 0;
-        font-size: 20px;
-        font-weight: bold;
-        text-decoration: blink;
-    }
-
-    // override bootstrap
-    .table-striped > tbody > tr:nth-of-type(odd) {
-        // impar
-        background-color: #eaeaea;
-
-        .position {
-            background-color: #fff;
-        }
-    }
-
-    .table-striped > tbody > tr:nth-of-type(even) {
-        // par
-        background-color: #fff;
-
-        .position {
-            background-color: #eaeaea;
-        }
-    }
-}
@@ -1,143 +0,0 @@
-(function() {
-  'use strict';
-
-  angular
-    .module('dialoga')
-    .directive('proposalRanking', proposalRanking);
-
-  /** @ngInject */
-  function proposalRanking() {
-
-    /** @ngInject */
-    function ProposalRankingController(ArticleService, $scope, $element, $timeout, $log) {
-      $log.debug('ProposalRankingController');
-
-      var vm = this;
-      vm.ArticleService = ArticleService;
-      vm.$scope = $scope;
-      vm.$element = $element;
-      vm.$timeout = $timeout;
-      vm.$log = $log;
-
-      vm.init();
-    }
-
-    ProposalRankingController.prototype.init = function () {
-      // initial values
-      var vm = this;
-
-      vm.activeIndex = 0;
-      vm.loading = false;
-
-      if(angular.isDefined(vm.limit) && angular.isString(vm.limit)){
-        vm.limit = parseInt(vm.limit);
-      }else{
-        vm.limit = 3;
-      }
-
-      vm.loadData();
-    };
-
-    ProposalRankingController.prototype.loadData = function () {
-      // async values
-      var vm = this;
-
-      vm.loading = true;
-
-      // simulate delay
-      vm.$timeout(function(){
-        vm.loading = false;
-
-        // Fake Data
-        // vm.proposals = vm.ArticleService.getProposals();
-        vm.proposals = [{
-          id: 4159,
-          abstract: 'Ut odio unde porro in. Aut fuga magni adipisci. Recusandae ipsum distinctio omnis ut illum.',
-          effective_support: 0.1572052401746725,
-          hits: 4159,
-          votes_against: 3779,
-          votes_for: 1780
-        },{
-          id: 935,
-          abstract: 'Aut fuga magni adipisci. Recusandae ipsum distinctio omnis ut illum. Magni sunt ut molestiae.',
-          effective_support: 0.1572052401746725,
-          hits: 8602,
-          votes_against: 7005,
-          votes_for: 8728
-        },{
-          id: 1008,
-          abstract: 'Recusandae ipsum distinctio omnis ut illum. Magni sunt ut molestiae. Aut fuga magni adipisci.',
-          effective_support: 0.1572052401746725,
-          hits: 9181,
-          votes_against: 612,
-          votes_for: 1786
-        }];
-
-        if(vm.display === 'list'){
-          // wait until DOM be created
-          vm.$timeout(function(){
-            attachPopover.call(vm);
-          }, 20);
-        }
-      }, 2000);
-    };
-
-    ProposalRankingController.prototype.swipeLeft = function () {
-      var vm = this;
-
-      vm.activeIndex = (vm.activeIndex < vm.limit - 1) ? ++vm.activeIndex : 0;
-    };
-
-    ProposalRankingController.prototype.swipeRight = function () {
-      var vm = this;
-
-      vm.activeIndex = (vm.activeIndex > 0) ? --vm.activeIndex : vm.limit - 1;
-    };
-
-    ProposalRankingController.prototype.switchProposal = function (index) {
-      var vm = this;
-
-      if(index >= 0 && index < vm.limit) {
-        vm.activeIndex = index;
-      }else{
-        vm.$log.warn('[switchProposal] "index" not handled:', index);
-      }
-    };
-
-    ProposalRankingController.prototype.showProposals = function () {
-      var vm = this;
-
-      // notify parents - handled by parents
-      vm.$scope.$emit('see-proposals');
-    };
-
-    function attachPopover(){
-      var vm = this;
-
-      vm.popover = angular.element(vm.$element.find('.btn-question'));
-      vm.popover.popover({
-        html: true,
-        placement: 'top',
-        animation: true,
-        title: 'Regra de posição das propostas',
-        content: '<p>É calculada pelo saldo de interações das propostas (curtidas - não curtidas) dividido pela diferença de exibições entre elas.</p><p>O objetivo dessa correção é compensar o saldo de interações e a diferença de exibições das propostas que não tiveram muitas oportunidades de visualização ou das propostas que tiveram mais oportunidades de visualização que a média.</p><p>Com essa correção, é possível comparar propostas que entraram em diferentes momentos, durante todo o período da consulta.</p>'
-      });
-    }
-
-    var directive = {
-      restrict: 'E',
-      templateUrl: 'app/components/proposal-ranking/proposal-ranking.html',
-      scope: {
-        limit: '&',
-        display: '='
-      },
-      controller: ProposalRankingController,
-      controllerAs: 'vm',
-      bindToController: true
-    };
-
-
-    return directive;
-  }
-
-})();
@@ -1,84 +0,0 @@
-<div class="proposal-ranking contraste-box">
-  <div class="proposal-ranking--carousel" ng-if="vm.display === 'carousel'">
-    <div ng-if="!vm.proposals">
-      Carregando...
-    </div>
-    <div ng-if="vm.proposals">
-      <div class="proposal-ranking--carousel-top color-theme-bg">
-        <div class="proposal-ranking--carousel-position" ng-repeat="proposal in vm.proposals">
-          <span ng-show="vm.activeIndex === $index">{{::($index+1)}}º</span>
-          <span ng-show="vm.activeIndex === $index">Lugar</span>
-        </div>
-        <div class="proposal-ranking--carousel-top-triggers" ng-if="vm.proposals">
-          <ul class="list-inline">
-            <li class="item-dot" ng-repeat="proposal in vm.proposals">
-              <button type="button" ng-class="{'active': vm.activeIndex === $index}" ng-click="vm.switchProposal($index)" title="Apersentar proposta na posição {{$index}}"></button>
-            </li>
-          </ul>
-        </div>
-      </div>
-      <div class="proposal-ranking--carousel-middle" ng-swipe-left="vm.swipeLeft()" ng-swipe-right="vm.swipeRight()">
-        <div ng-repeat="proposal in vm.proposals" class="animation-swipe">
-          <div class="content">
-            <div ng-show="vm.activeIndex === $index">{{::proposal.abstract}}</div>
-          </div>
-          <div class="proposal-ranking--carousel-middle-watermark" ng-show="vm.activeIndex === $index">
-            <span>{{::($index+1)}}º</span>
-          </div>
-        </div>
-      </div>
-      <div class="proposal-ranking--carousel-bottom color-theme-common-bg" ng-click="vm.showProposals()">
-        <div>Veja as propostas mais vortadas</div>
-        <div class="proposal-ranking--carousel-bottom-icon">
-          <span class="glyphicon glyphicon-chevron-down pull-right color-theme-common-fg"></span>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <div class="proposal-ranking--list" ng-if="vm.display==='list'">
-
-    <div class="table-responsive" ng-if="vm.loading">
-      <div class="table-responsive">Carregando...</div>
-    </div>
-    <div class="table-responsive" ng-if="!vm.loading && vm.proposals">
-      <table class="table table-striped">
-        <thead>
-          <tr>
-            <th>
-              Colocação
-              <button type="button" class="btn btn-link btn-question">?</button>
-            </th>
-            <th>123 PROPOSTAS</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr ng-repeat="proposal in vm.proposals">
-
-            <td class="color-theme-fg">
-              <span class="position">{{::($index+1)}}º</span>
-            </td>
-            <td>
-              <div class="row">
-                <div class="col-xs-12">
-                  <span class="abstract">{{proposal.abstract}}</span>
-                </div>
-              </div>
-              <div class="row row-actions">
-                <div class="col-md-9">
-                  <button type="button" class="btn btn-link btn-rate color-theme-common-fg">
-                    Avalie esta proposta
-                    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
-                  </button>
-                </div>
-                <div class="col-md-3">
-                  <proposal-stats views="{{::proposal.hits}}" up="{{::proposal.votes_for}}" down="{{::proposal.votes_against}}"></proposal-stats>
-                </div>
-              </div>
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-  </div>
-</div>
@@ -76,7 +76,7 @@
         if(vm.display === 'list'){
           // wait until DOM be created
           vm.$timeout(function(){
-            attachPopover.call(vm);
+            // attachPopover.call(vm);
           }, 20);
         }
       }, 2000);
@@ -1,78 +0,0 @@
-(function() {
-  'use strict';
-
-  angular
-    .module('dialoga')
-    .factory('UtilService', UtilService);
-
-  /** @ngInject */
-  function UtilService($http, $q, $log) {
-    $log.debug('UtilService');
-
-    var service = {
-      get: get,
-      post: post,
-      // put: put,
-      // delete: delete,
-      // head: head,
-      handleSuccess: handleSuccess,
-      handleError: handleError
-    };
-
-    return service;
-
-    function get (url, config) {
-      return $http.get(url, config)
-        .then(handleSuccess)
-        .catch(handleError);
-    }
-
-    function post (url, config) {
-      return $http.post(url, config)
-        .then(handleSuccess)
-        .catch(handleError);
-    }
-
-    /**
-     * Transform the successful response, unwrapping the application data
-     * from the API response payload.
-     *
-     * @param  {Object} response from the server.
-     *         data – {string|Object} – The response body transformed with the transform functions.
-     *         status – {number} – HTTP status code of the response.
-     *         headers – {function([headerName])} – Header getter function.
-     *         config – {Object} – The configuration object that was used to generate the request.
-     *         statusText – {string} – HTTP status text of the response.
-     *
-     * @return {Object}          the data unwrapped.
-     */
-    function handleSuccess (response) {
-      $log.debug('[SUCCESS]', response);
-      return response.data;
-    }
-
-    /**
-     * Transform the error response, unwrapping the application data from
-     * the API response payload.
-     *
-     * @param  {Object} error from the server.
-     * @return {Promise}      promise rejection called.
-     */
-    function handleError (error) {
-      $log.debug('[ERROR]', error);
-
-      $log.error('XHR Failed on Service.\n' + angular.toJson(error.data, true));
-
-      // The API response from the server should be returned in a
-      // nomralized format. However, if the request was not handled by the
-      // server (or what not handles properly - ex. server error), then we
-      // may have to normalize it on our end, as best we can.
-      if (!angular.isObject(error.data) || !error.data.message) {
-        return $q.reject('An unknown error occurred.');
-      }
-
-      // Otherwise, use expected error message.
-      return $q.reject(error.data.message);
-    }
-  }
-})();
@@ -1,28 +0,0 @@
-(function() {
-  'use strict';
-
-  describe('util services', function() {
-    // var UtilService, httpBackend;
-
-    // beforeEach(module('dialoga'));
-
-    // beforeEach(inject(function(_UtilService_, $httpBackend) {
-    //   UtilService = _UtilService_;
-    //   httpBackend = $httpBackend;
-    // }));
-
-    // it('should do something', function() {
-    //   var url = 'http://example.com/api/v1/data/103358';
-    //   httpBackend.whenGET(url).respond({});
-
-    //   UtilService.getData().then(function(result) {
-
-    //     expect(result.data).toBeDefined();
-    //     expect(result.data.title).toEqual('My Title');
-
-    //   });
-
-    //   httpBackend.flush();
-    // });
-  });
-})();
@@ -23,7 +23,7 @@
     function SocialShareController($log) {
       $log.debug('SocialShareController');
-      var vm = this;
+      // var vm = this;
     }
   }
@@ -21,8 +21,4 @@
         text-align: right;
         vertical-align: middle;
     }
-
-    .icon {
-        display: block;
-    }
 }
@@ -0,0 +1,316 @@
+(function() {
+  'use strict';
+
+  angular
+    .module('dialoga')
+    .directive('topicList', topicList);
+
+  /** @ngInject */
+  function topicList() {
+
+    /** @ngInject */
+    function TopicListController($scope, $element, $location, $filter, $log) {
+      $log.debug('TopicListController');
+
+      // alias
+      var vm = this;
+
+      // dependencies
+      vm.$scope = $scope;
+      vm.$element = $element;
+      vm.$location = $location;
+      vm.$filter = $filter;
+      vm.$log = $log;
+      vm.defaultLimit = 6;
+
+      // initialization
+      vm.init();
+    }
+
+    TopicListController.prototype.init = function() {
+      var vm = this;
+
+      if (!vm.article) {
+        vm.$log.warn('no article to display. Tip: use a ng-if before use this directive');
+        return;
+      }
+
+      vm.categories = vm.article.categories;
+      vm.programs = vm.article.children;
+      vm.orderCriteries = [
+        { label: 'Título', name: 'titulo' },
+        { label: 'Tema', name: 'tema' },
+        { label: 'Aleatório', name: 'aleatorio' }
+      ];
+
+      vm.filtredProgramList = vm.getFiltredPrograms();
+      vm.search = vm.$location.search();
+
+      // Add initial values for the filter
+      vm.query = (vm.search && vm.search.filtro) ? vm.search.filtro : null;
+      vm.limitTo = (vm.search && vm.search.limite) ? parseInt(vm.search.limite, 10) : vm.defaultLimit;
+      vm.categoryFilter = (vm.search && vm.search.tema) ? vm.getCategoryBySlug(vm.search.tema) : null;
+      vm.orderCriteria = (vm.search && vm.search.ordem) ? { name: vm.search.ordem } : null;
+      vm.reverse = (vm.search && vm.search.reverso) ? true : false;
+
+      if (!angular.equals({}, vm.search)) {
+        var $el = vm.$element;
+        angular.element('body').animate({scrollTop: $el.offset().top}, 'slow');
+      }
+
+      // update window location params
+      vm.$scope.$watch('vm.query', function(newValue/*, oldValue*/) {
+        vm.search.filtro = newValue ? newValue : null;
+        vm.$location.search('filtro', vm.search.filtro);
+        if(vm.search.filtro){
+          vm.limitTo = vm.programs.length;
+        }else{
+          vm.limitTo = vm.defaultLimit;
+        }
+        vm.filtredProgramList = vm.getFiltredPrograms();
+      });
+
+      vm.$scope.$watch('vm.limitTo', function(newValue/*, oldValue*/) {
+        vm.search.limite = (newValue && newValue !== vm.defaultLimit)  ? newValue : null;
+        vm.$location.search('limite', vm.search.limite);
+        vm.filtredProgramList = vm.getFiltredPrograms();
+      });
+
+      vm.$scope.$watch('vm.categoryFilter', function(newValue/*, oldValue*/) {
+        vm.search.tema = newValue ? newValue.slug : null;
+        vm.$location.search('tema', vm.search.tema);
+        if(vm.search.tema){
+          vm.limitTo = vm.programs.length;
+        }
+        vm.filtredProgramList = vm.getFiltredPrograms();
+      });
+
+      vm.$scope.$watch('vm.orderCriteria', function(newValue/*, oldValue*/) {
+        vm.search.ordem = (newValue && newValue.name) ? newValue.name : null;
+        vm.$location.search('ordem', vm.search.ordem);
+        vm.filtredProgramList = vm.getFiltredPrograms();
+      });
+
+      vm.$scope.$watch('vm.reverse', function(newValue/*, oldValue*/) {
+        vm.search.reverso = newValue ? newValue : null;
+        vm.$location.search('reverso', vm.search.reverso);
+        vm.filtredProgramList = vm.getFiltredPrograms();
+      });
+
+    };
+
+    TopicListController.prototype.resetFilterValues = function() {
+      var vm = this;
+
+      vm.query = null;
+      vm.limitTo = vm.defaultLimit;
+      vm.categoryFilter = null;
+      vm.orderCriteria = null;
+    };
+
+    TopicListController.prototype.getIconClasses = function(category) {
+      var vm = this;
+
+      vm.$log.debug('[TODO] getIconClasses of category:', category);
+      return 'glyphicon glyphicon-exclamation-sign';
+    };
+
+    TopicListController.prototype.getCategoryBySlug = function(categorySlug) {
+      var vm = this;
+      var result = null;
+
+      angular.forEach(vm.categories, function(value/*, key*/) {
+        if (value.slug === categorySlug) {
+          result = value;
+        }
+      });
+
+      return result;
+    };
+
+    TopicListController.prototype.filterByCategory = function(category, $event) {
+      var vm = this;
+
+      $event.stopPropagation();
+
+      if (category !== vm.categoryFilter) {
+
+        // selected new filter
+        vm.categoryFilter = category;
+      } else {
+        vm.categoryFilter = null;
+      }
+    };
+
+    TopicListController.prototype.showAll = function($event) {
+      var vm = this;
+
+      $event.stopPropagation();
+
+      vm.resetFilterValues();
+      vm.limitTo = vm.programs.length;
+    };
+
+    TopicListController.prototype.getFiltredPrograms = function() {
+      var vm = this;
+
+      var input = vm.programs;
+      var output = input;
+      var query = vm.query;
+      var categoryFilter = vm.categoryFilter;
+      var orderCriteria = vm.orderCriteria ? vm.orderCriteria : { name : 'aleatorio'};
+      var filter = vm.$filter('filter');
+      var orderBy = vm.$filter('orderBy');
+      var limitTo = vm.$filter('limitTo');
+      var limit = vm.limitTo ? vm.limitTo : 4;
+
+      if (categoryFilter) {
+        output = _filterByCategory(output, categoryFilter);
+      }
+
+      if (query) {
+        output = filter(output, query, false);
+      }
+
+      switch (orderCriteria.name) {
+        case 'titulo':
+          output = orderBy(output, 'title', vm.reverse);
+          break;
+        case 'tema':
+          output = orderBy(output, 'categories[0].name', vm.reverse);
+          break;
+        case 'more_participants':
+          vm.$log.info('Criteria not handled yet: ', orderCriteria);
+          break;
+        case 'aleatorio':
+          // shuffling
+          // if (!vm._isShuffled){
+          output = vm.filterShuffle(output);
+          //   vm._isShuffled = true;
+          // }
+
+          if (vm.reverse) {
+            output = output.slice().reverse();
+          }
+
+          break;
+        default:
+          vm.$log.warn('Criteria not matched: ', orderCriteria);
+          break;
+      }
+
+      output = limitTo(output, limit);
+
+      return output;
+    };
+
+    TopicListController.prototype.filterShuffle = function(input) {
+      var result = [];
+      var resultByCategory = {};
+
+      // divide by categories
+      for (var i = 0; i < input.length; i++) {
+        var program = input[i];
+        var categorySlug = program.categories[0].slug;
+
+        if (!resultByCategory[categorySlug]) {
+          resultByCategory[categorySlug] = [];
+        }
+
+        resultByCategory[categorySlug].push(program);
+      }
+
+      // shuffle each array
+      var prop = null;
+      var categoryWithPrograms = null;
+      for (prop in resultByCategory) {
+        if (resultByCategory.hasOwnProperty(prop)) {
+          categoryWithPrograms = resultByCategory[prop];
+          resultByCategory[prop] = shuffle(categoryWithPrograms);
+        }
+      }
+
+      // Concat all into result array
+      // > while has program at Lists on resultByCategory
+      var hasProgram = true;
+      while (hasProgram) {
+
+        var foundProgram = false;
+        // each categoryList with array of program
+        prop = null;
+        categoryWithPrograms = null;
+        for (prop in resultByCategory) {
+
+          if (resultByCategory.hasOwnProperty(prop)) {
+            categoryWithPrograms = resultByCategory[prop];
+
+            if (categoryWithPrograms.length > 0) {
+              var pivotProgram = categoryWithPrograms.pop();
+              result.push(pivotProgram);
+              foundProgram = true;
+            }
+          }
+        }
+
+        if (!foundProgram) {
+          hasProgram = false;
+        }
+      }
+
+      return result;
+    };
+
+    var directive = {
+      restrict: 'E',
+      templateUrl: 'app/components/programas/programas.html',
+      scope: {
+        article: '='
+      },
+      controller: TopicListController,
+      controllerAs: 'vm',
+      bindToController: true
+    };
+
+    return directive;
+  }
+
+  function _filterByCategory (input, category) {
+    input = input || [];
+
+    if (!category) {
+      // no filter
+      return input;
+    }
+
+    var out = [];
+    for (var i = 0; i < input.length; i++) {
+      var program = input[i];
+      if (program.categories[0].slug === category.slug) {
+        out.push(program);
+      }
+    }
+
+    return out;
+  }
+
+  // -> Fisher–Yates shuffle algorithm
+  function shuffle (array) {
+    var currentIndex = array.length, temporaryValue, randomIndex ;
+
+    // While there remain elements to shuffle...
+    while (0 !== currentIndex) {
+
+      // Pick a remaining element...
+      randomIndex = Math.floor(Math.random() * currentIndex);
+      currentIndex -= 1;
+
+      // And swap it with the current element.
+      temporaryValue = array[currentIndex];
+      array[currentIndex] = array[randomIndex];
+      array[randomIndex] = temporaryValue;
+    }
+
+    return array;
+  }
+
+})();
@@ -0,0 +1,32 @@
+(function() {
+  'use strict';
+
+  describe('topic directive', function() {
+    var compile, scope, directiveElem;
+
+    beforeEach(function(){
+      module('dialoga');
+
+      inject(function($compile, $rootScope){
+        compile = $compile;
+        scope = $rootScope.$new();
+        // mock topics
+        scope.topics = [];
+      });
+
+      directiveElem = getCompiledElement();
+    });
+
+    function getCompiledElement(){
+      var element = compile(angular.element('<topic-list></topic-list>'))(scope);
+      var compiledElement = compile(element)(scope);
+      scope.$digest();
+      return compiledElement;
+    }
+
+    // it('ensure exist only one id "topic-list"', function() {});
+
+    // it('should show default topics, one each category', function() {});
+
+  });
+})();
@@ -0,0 +1,78 @@
+(function() {
+  'use strict';
+
+  angular
+    .module('dialoga')
+    .factory('UtilService', UtilService);
+
+  /** @ngInject */
+  function UtilService($http, $q, $log) {
+    $log.debug('UtilService');
+
+    var service = {
+      get: get,
+      post: post,
+      // put: put,
+      // delete: delete,
+      // head: head,
+      handleSuccess: handleSuccess,
+      handleError: handleError
+    };
+
+    return service;
+
+    function get (url, config) {
+      return $http.get(url, config)
+        .then(handleSuccess)
+        .catch(handleError);
+    }
+
+    function post (url, config) {
+      return $http.post(url, config)
+        .then(handleSuccess)
+        .catch(handleError);
+    }
+
+    /**
+     * Transform the successful response, unwrapping the application data
+     * from the API response payload.
+     *
+     * @param  {Object} response from the server.
+     *         data – {string|Object} – The response body transformed with the transform functions.
+     *         status – {number} – HTTP status code of the response.
+     *         headers – {function([headerName])} – Header getter function.
+     *         config – {Object} – The configuration object that was used to generate the request.
+     *         statusText – {string} – HTTP status text of the response.
+     *
+     * @return {Object}          the data unwrapped.
+     */
+    function handleSuccess (response) {
+      $log.debug('[SUCCESS]', response);
+      return response.data;
+    }
+
+    /**
+     * Transform the error response, unwrapping the application data from
+     * the API response payload.
+     *
+     * @param  {Object} error from the server.
+     * @return {Promise}      promise rejection called.
+     */
+    function handleError (error) {
+      $log.debug('[ERROR]', error);
+
+      $log.error('XHR Failed on Service.\n' + angular.toJson(error.data, true));
+
+      // The API response from the server should be returned in a
+      // nomralized format. However, if the request was not handled by the
+      // server (or what not handles properly - ex. server error), then we
+      // may have to normalize it on our end, as best we can.
+      if (!angular.isObject(error.data) || !error.data.message) {
+        return $q.reject('An unknown error occurred.');
+      }
+
+      // Otherwise, use expected error message.
+      return $q.reject(error.data.message);
+    }
+  }
+})();
@@ -0,0 +1,28 @@
+(function() {
+  'use strict';
+
+  describe('util services', function() {
+    // var UtilService, httpBackend;
+
+    // beforeEach(module('dialoga'));
+
+    // beforeEach(inject(function(_UtilService_, $httpBackend) {
+    //   UtilService = _UtilService_;
+    //   httpBackend = $httpBackend;
+    // }));
+
+    // it('should do something', function() {
+    //   var url = 'http://example.com/api/v1/data/103358';
+    //   httpBackend.whenGET(url).respond({});
+
+    //   UtilService.getData().then(function(result) {
+
+    //     expect(result.data).toBeDefined();
+    //     expect(result.data.title).toEqual('My Title');
+
+    //   });
+
+    //   httpBackend.flush();
+    // });
+  });
+})();
@@ -194,9 +194,18 @@
           'footer': { templateUrl: 'app/pages/footer/footer.html' }
         }
       })
+      .state('erro', {
+        url: '/erro',
+        ncyBreadcrumb: {label: 'Erro'},
+        views: {
+          'header': { templateUrl: 'app/pages/header/header.html' },
+          'main': { templateUrl: 'app/pages/erro/erro.html' },
+          'footer': { templateUrl: 'app/pages/footer/footer.html' }
+        }
+      })
       ;
-    $urlRouterProvider.otherwise('/');
+    $urlRouterProvider.otherwise('/erro');
   }
 })();
@@ -132,6 +132,10 @@ body {
     }
 }
+.icon {
+    display: block;
+}
+
 .icon-wrapper-rounded {
     padding: 3px;
     border-radius: 100%;
 .row-height {
-    display: table;
-    table-layout: fixed;
-    height: 100%;
-    width: 100%;
+  display: table;
+  table-layout: fixed;
+  height: 100%;
+  width: 100%;
+}
-    @media (max-width: $screen-sm) {
-        display: block;
-    }
+.col-height {
+  display: table-cell;
+  float: none;
+  height: 100%;
+}
-    // @media (min-width: $screen-sm + 1) {
-    //     height: $hLine * 2;
-    // }
+.col-top {
+  vertical-align: top;
+}
-    // @media (min-width: $screen-md + 1) {
-    //     height: $hLine * 2;
-    // }
+.col-middle {
+  vertical-align: middle;
 }
-.col-height {
+.col-bottom {
+  vertical-align: bottom;
+}
+
+@media (min-width: 480px) {
+  .row-xs-height {
+    display: table;
+    table-layout: fixed;
+    height: 100%;
+    width: 100%;
+  }
+  .col-xs-height {
     display: table-cell;
     float: none;
     height: 100%;
+  }
+  .col-xs-top {
     vertical-align: top;
+  }
+  .col-xs-middle {
+    vertical-align: middle;
+  }
+  .col-xs-bottom {
+    vertical-align: bottom;
+  }
 }
-.col-height--align-bottom {
+@media (min-width: 768px) {
+  .row-sm-height {
+    display: table;
+    table-layout: fixed;
+    height: 100%;
+    width: 100%;
+  }
+  .col-sm-height {
+    display: table-cell;
+    float: none;
+    height: 100%;
+  }
+  .col-sm-top {
+    vertical-align: top;
+  }
+  .col-sm-middle {
+    vertical-align: middle;
+  }
+  .col-sm-bottom {
     vertical-align: bottom;
+  }
 }
-.inside {
-  margin-top: 20px;
-  margin-bottom: 20px;
+@media (min-width: 992px) {
+  .row-md-height {
+    display: table;
+    table-layout: fixed;
+    height: 100%;
+    width: 100%;
+  }
+  .col-md-height {
+    display: table-cell;
+    float: none;
+    height: 100%;
+  }
+  .col-md-top {
+    vertical-align: top;
+  }
+  .col-md-middle {
+    vertical-align: middle;
+  }
+  .col-md-bottom {
+    vertical-align: bottom;
+  }
 }
-.inside-full-height {
+@media (min-width: 1200px) {
+  .row-lg-height {
+    display: table;
+    table-layout: fixed;
     height: 100%;
-    margin-top: 0;
-    margin-bottom: 0;
-
-
-    @media (max-width: $screen-sm) {
-        border: 1px solid;
-        border-radius: 3px;
-        padding: 20px;
-        margin: 10px 0;
-
-        @each $category, $color in $categories {
-            .#{$category} & {
-                border-color: $color;
-            }
-        }
-    }
+    width: 100%;
+  }
+  .col-lg-height {
+    display: table-cell;
+    float: none;
+    height: 100%;
+  }
+  .col-lg-top {
+    vertical-align: top;
+  }
+  .col-lg-middle {
+    vertical-align: middle;
+  }
+  .col-lg-bottom {
+    vertical-align: bottom;
+  }
 }
 .has-error {
@@ -6,11 +6,11 @@
     .controller('ArticlePageController', ArticlePageController);
   /** @ngInject */
-  function ArticlePageController(ArticleService, $state, $sce, $log) {
+  function ArticlePageController(DialogaService, $state, $sce, $log) {
     $log.debug('ArticlePageController');
     var vm = this;
-    vm.ArticleService = ArticleService;
+    vm.DialogaService = DialogaService;
     vm.$state = $state;
     vm.$sce = $sce;
     vm.$log = $log;
@@ -26,10 +26,10 @@
     vm.loading = true;
     switch (vm.page){
       case 'sobre':
-        vm.ArticleService.getAbout(handleSuccess, handleError);
+        vm.DialogaService.getAbout(handleSuccess, handleError);
         break;
       case 'termos-de-uso':
-        vm.ArticleService.getTerms(handleSuccess, handleError);
+        vm.DialogaService.getTerms(handleSuccess, handleError);
         break;
       default:
         vm.$log.warn('Page not handled:', vm.page);
-<div class="container" role="main">
+<div class="container">
+  <div class="row">
+    <div class="col-sm-12">
+      <div ncy-breadcrumb></div>
+    </div>
+  </div>
+</div>
-  <article-bar></article-bar>
+<div class="container" role="main">
   <div ng-if="pageArticle.loading">
     <div class="alert alert-info">
@@ -1,173 +0,0 @@
-(function() {
-  'use strict';
-
-  angular
-    .module('dialoga')
-    .factory('ArticleService', ArticleService);
-
-  /** @ngInject */
-  function ArticleService($http, $q, $rootScope, API, UtilService, Slug, $log) {
-    $log.debug('ArticleService');
-
-    var idArticleHome = API.articleId.home;
-    var idArticleAbout = API.articleId.about;
-    var idArticleTerms = API.articleId.terms;
-
-    var _savedAbstract = null;
-
-    var service = {
-      apiArticles: $rootScope.basePath + '/api/v1/articles/',
-      getHome: getHome,
-      getAbout: getAbout,
-      getTerms: getTerms,
-      getArticleById: getArticleById,
-      getArticleBySlug: getArticleBySlug,
-      getCategories: getCategories,
-      getCategoryBySlug: getCategoryBySlug,
-      getPrograms: getPrograms,
-      getContentById: getContentById,
-      setHomeAbstract: setHomeAbstract,
-      getHomeAbstract: getHomeAbstract
-    };
-
-    var CACHE = {}; // cache by article id
-
-    return service;
-
-    function loadArticleById (articleId, params, cbSuccess, cbError) {
-
-      var url = service.apiArticles + articleId;
-      var paramsExtended = angular.extend({}, params);
-
-      UtilService.get(url, {params: paramsExtended}).then(function(data){
-        CACHE[articleId] = data;
-        cbSuccess(data);
-      }, function(error){
-        cbError(error);
-      });
-    }
-
-    function getArticleById (articleId, params, cbSuccess, cbError) {
-      var cachedArticle = CACHE[articleId];
-
-      if(cachedArticle){
-        cbSuccess(cachedArticle);
-      }else{
-        loadArticleById(articleId, params, cbSuccess, cbError);
-      }
-    }
-
-    function getArticleBySlug (slug, cbSuccess, cbError) {
-      var vm = this;
-
-      /**
-       * XXX: get from home article util we have a endpoint to do-it.
-       */
-      vm.getHome(function (data) {
-        var mainArticle = data.article;
-        var programList = mainArticle.children;
-        var categories = mainArticle.categories;
-
-        $rootScope._CATEGORIES = $rootScope._CATEGORIES ? $rootScope._CATEGORIES : categories;
-
-        var result = null;
-        for (var i = programList.length - 1; i >= 0; i--) {
-          var program = programList[i];
-
-          if(!program.slug){
-            program.slug = Slug.slugify(program.title);
-          }
-
-          if(program.slug === slug){
-            result = program;
-            break;
-          }
-        }
-
-        if(result){
-          cbSuccess(result);
-        }else{
-          cbError('None program with slug "' + slug + '"" was found.');
-        }
-      }, cbError);
-    }
-
-    function getCategories (cbSuccess, cbError) {
-      return getHome(function(data){
-        cbSuccess(data.article.categories);
-      }, cbError);
-    }
-
-    function getCategoryBySlug (slug, cbSuccess, cbError) {
-      return getHome(function (data){
-        var result = null;
-
-        for (var i = data.article.categories.length - 1; i >= 0; i--) {
-          var category = data.article.categories[i];
-          if (category.slug === slug) {
-            result = category;
-            break;
-          }
-        }
-
-        cbSuccess(result);
-      }, cbError);
-    }
-
-    function getPrograms (cbSuccess, cbError) {
-      return getHome(function(data){
-        cbSuccess(data.article.children);
-      }, cbError);
-    }
-
-    function getContentById (contentId, cbSuccess, cbError) {
-      return getArticleById(contentId, {
-        fields: 'id,body&content_type=ProposalsDiscussionPlugin::Topic'
-      }, cbSuccess, cbError);
-    }
-
-    function getHome (cbSuccess, cbError) {
-      return getArticleById(idArticleHome, {
-        fields: 'id,children,categories,abstract,title,image,url,setting,position',
-        private_token: 'null'
-      }, _handleCategory(cbSuccess), cbError);
-    }
-
-    function getAbout (cbSuccess, cbError) {
-      return getArticleById(idArticleAbout, {}, cbSuccess, cbError);
-    }
-
-    function getTerms (cbSuccess, cbError) {
-      return getArticleById(idArticleTerms, {}, cbSuccess, cbError);
-    }
-
-    function _handleCategory (cbSuccess) {
-      // var darkFactor = 0.15;
-
-      return function (data) {
-        if(data.article.categories){
-          // var categories = data.article.categories;
-
-          // Handle Category Data
-
-          // Handle Category Colors
-        //   for (var i = categories.length - 1; i >= 0; i--) {
-        //     var category = categories[i];
-        //     if(category.color && !category.bgColor){
-        //       category.colorDarker = $window.ColorLuminance(category.color, 0.15);
-        //     }
-        //   };
-        }
-        cbSuccess(data);
-      };
-    }
-
-    function setHomeAbstract (newAbstract) {
-      _savedAbstract = newAbstract;
-    }
-
-    function getHomeAbstract () {
-      return _savedAbstract;
-    }
-  }
-})();
@@ -1,67 +0,0 @@
-(function() {
-  'use strict';
-
-  describe('article services', function() {
-    var ArticleService, httpBackend;
-
-    beforeEach(module('dialoga'));
-
-    beforeEach(inject(function(_ArticleService_, $httpBackend) {
-      ArticleService = _ArticleService_;
-      httpBackend = $httpBackend;
-    }));
-
-    it('should return the main article', function() {
-      var url = 'http://login.dialoga.gov.br/api/v1/articles/103358?fields=id,children,categories,abstract,title,image,url,setting,position&private_token=null';
-      httpBackend.whenGET(url).respond({
-        'article':{'id':103358,'abstract':'\u003Cp style=\"text-align: center;\"\u003E\u003Ciframe src=\"https://www.youtube.com/embed/kpAdrO-emV0?rel=0\u0026amp;showinfo=0\u0026amp;iv_load_policy=3\u0026amp;controls=1\" style=\"max-width: 1000px; left: 5%;\" width=\"275\" height=\"200\"\u003E\u003C/iframe\u003E\u003C/p\u003E','title':'Dialoga Brasil','categories':[{'name':'Sa\u00fade','id':180,'slug':'saude','image':null},{'name':'Seguran\u00e7a P\u00fablica','id':182,'slug':'seguranca-publica','image':null},{'name':'Educa\u00e7\u00e3o','id':181,'slug':'educacao','image':null},{'name':'Redu\u00e7\u00e3o da Pobreza','id':183,'slug':'reducao-da-pobreza','image':null}],'image':null,'setting':{'custom_body_label':'Corpo','phase':'proposals','allow_topics':true,'moderate_comments':false,'comment_paragraph_plugin_activate':false,'author_name':'Leandro Nunes dos Santos','moderate_proposals':true,'allow_members_to_edit':false},'position':null,'children':[{'id':103644,'abstract':'\u003Cp\u003EUm caminho de oportunidades com o Enem: Sisu, Prouni, Fies, Ci\u00eancia sem Fronteiras\u003C/p\u003E','title':'Ensino Superior','categories':[{'name':'Educa\u00e7\u00e3o','id':181,'slug':'educacao','image':null}],'image':{'url':'/image_uploads/dialoga/0000/0128/enem.jpg'},'setting':{'color':'#cfe2f3','moderate_comments':false,'comment_paragraph_plugin_activate':false,'author_name':'Ronald Emerson Scherolt da Costa','allow_members_to_edit':false},'position':9},{'id':103673,'abstract':'\u003Cp\u003EA melhor escolha \u00e9 se informar.\u003C/p\u003E','title':'Incentivo ao Parto Normal','categories':[{'name':'Sa\u00fade','id':180,'slug':'saude','image':null}],'image':{'url':'/image_uploads/dialoga/0000/0092/parto-normal.jpg'},'setting':{'color':'#ff0000','moderate_comments':false,'comment_paragraph_plugin_activate':false,'author_name':'Ronald Emerson Scherolt da Costa','allow_members_to_edit':false},'position':6},{'id':103397,'abstract':'\u003Cp\u003ERenda, inclus\u00e3o produtiva e acesso a servi\u00e7os.\u003C/p\u003E','title':'Brasil Sem Mis\u00e9ria','categories':[{'name':'Redu\u00e7\u00e3o da Pobreza','id':183,'slug':'reducao-da-pobreza','image':null}],'image':{'url':'/image_uploads/dialoga/0000/0116/bsm_redim.jpg'},'setting':{'color':'','moderate_comments':false,'comment_paragraph_plugin_activate':false,'author_name':'Ronald Emerson Scherolt da Costa','allow_members_to_edit':false},'position':18},{'id':103379,'abstract':'\u003Cp\u003EResgate e atendimento 24 horas, sete dias da semana.\u003C/p\u003E','title':'SAMU 192 e UPAs','categories':[{'name':'Sa\u00fade','id':180,'slug':'saude','image':null}],'image':{'url':'/image_uploads/dialoga/0000/0060/SAMU.jpg'},'setting':{'color':'#45818e','moderate_comments':false,'comment_paragraph_plugin_activate':false,'author_name':'Ronald Emerson Scherolt da Costa','allow_members_to_edit':false},'position':4},{'id':103521,'abstract':'\u003Cp\u003EMais atendimento nos munic\u00edpios, mais sa\u00fade para quem mais precisa.\u003C/p\u003E','title':'Mais M\u00e9dicos','categories':[{'name':'Sa\u00fade','id':180,'slug':'saude','image':null}],'image':{'url':'/image_uploads/dialoga/0000/0025/Mais_M_dicos.jpg'},'setting':{'color':'#ffe599','moderate_comments':false,'comment_paragraph_plugin_activate':false,'author_name':'Ronald Emerson Scherolt da Costa','allow_members_to_edit':false},'position':1},{'id':103390,'abstract':'\u003Cp\u003EPreven\u00e7\u00e3o, tratamento e enfrentamento ao tr\u00e1fico.\u003C/p\u003E','title':'Crack, \u00e9 poss\u00edvel vencer!','categories':[{'name':'Seguran\u00e7a P\u00fablica','id':182,'slug':'seguranca-publica','image':null}],'image':{'url':'/image_uploads/dialoga/0000/0104/crack.jpg'},'setting':{'color':'#00ff00','moderate_comments':false,'comment_paragraph_plugin_activate':false,'author_name':'Ronald Emerson Scherolt da Costa','allow_members_to_edit':false},'position':14},{'id':103592,'abstract':'\u003Cp\u003EGarantir acesso \u00e0 prote\u00e7\u00e3o social.\u003C/p\u003E','title':'Assist\u00eancia Social','categories':[{'name':'Redu\u00e7\u00e3o da Pobreza','id':183,'slug':'reducao-da-pobreza','image':null}],'image':{'url':'/image_uploads/dialoga/0000/0122/assistencia_social.jpg'},'setting':{'color':'#a61c00','moderate_comments':false,'comment_paragraph_plugin_activate':false,'author_name':'Ronald Emerson Scherolt da Costa','allow_members_to_edit':false},'position':19},{'id':103426,'abstract':'\u003Cp\u003EDa sa\u00fade se cuida todos os dias.\u003C/p\u003E','title':'Vida saud\u00e1vel','categories':[{'name':'Sa\u00fade','id':180,'slug':'saude','image':null}],'image':{'url':'/image_uploads/dialoga/0000/0046/vida_saudavel.jpg'},'setting':{'color':'#d9d2e9','moderate_comments':false,'comment_paragraph_plugin_activate':false,'author_name':'Ronald Emerson Scherolt da Costa','allow_members_to_edit':false},'position':7},{'id':103695,'abstract':'\u003Cp\u003ENovo modelo de atua\u00e7\u00e3o em Seguran\u00e7a P\u00fablica.\u003C/p\u003E','title':'Seguran\u00e7a P\u00fablica Integrada','categories':[{'name':'Seguran\u00e7a P\u00fablica','id':182,'slug':'seguranca-publica','image':null}],'image':{'url':'/image_uploads/dialoga/0000/0152/policiaintegrada.jpg'},'setting':{'color':'#ff00ff','moderate_comments':false,'comment_paragraph_plugin_activate':false,'author_name':'Ronald Emerson Scherolt da Costa','allow_members_to_edit':false},'position':13},{'id':103663,'abstract':'\u003Cp\u003EMais educa\u00e7\u00e3o profissional e tecnol\u00f3gica, mais desenvolvimento\u003C/p\u003E','title':'Ensino T\u00e9cnico','categories':[{'name':'Educa\u00e7\u00e3o','id':181,'slug':'educacao','image':null}],'image':{'url':'/image_uploads/dialoga/0000/0134/Ensino_tecnico.jpg'},'setting':{'color':'#d0e0e3','moderate_comments':false,'comment_paragraph_plugin_activate':false,'author_name':'Ronald Emerson Scherolt da Costa','allow_members_to_edit':false},'position':10},{'id':103472,'abstract':'\u003Cp\u003EPol\u00edcia Federal, Pol\u00edcia Rodovi\u00e1ria Federal e For\u00e7a Nacional de Seguran\u00e7a P\u00fablica.\u003C/p\u003E','title':'For\u00e7as Federais de Seguran\u00e7a','categories':[{'name':'Seguran\u00e7a P\u00fablica','id':182,'slug':'seguranca-publica','image':null}],'image':{'url':'/image_uploads/dialoga/0000/0031/federais2.png'},'setting':{'color':'','moderate_comments':false,'comment_paragraph_plugin_activate':false,'author_name':'Ronald Emerson Scherolt da Costa','allow_members_to_edit':false},'position':16},{'id':103612,'abstract':'\u003Cp\u003EGarantir \u00e1gua para beber e produzir.\u003C/p\u003E','title':'Cisternas','categories':[{'name':'Redu\u00e7\u00e3o da Pobreza','id':183,'slug':'reducao-da-pobreza','image':null}],'image':{'url':'/image_uploads/dialoga/0000/0039/cisterna_redim.jpg'},'setting':{'color':'#0000ff','moderate_comments':false,'comment_paragraph_plugin_activate':false,'author_name':'Ronald Emerson Scherolt da Costa','allow_members_to_edit':false},'position':20},{'id':103442,'abstract':'\u003Cp\u003EComplemento \u00e0 renda e acompanhamento em educa\u00e7\u00e3o e sa\u00fade.\u003C/p\u003E','title':'Bolsa Fam\u00edlia','categories':[{'name':'Redu\u00e7\u00e3o da Pobreza','id':183,'slug':'reducao-da-pobreza','image':null}],'image':{'url':'/image_uploads/dialoga/0000/0013/bolsa_familia_redim.jpg'},'setting':{'color':'#ff9900','moderate_comments':false,'comment_paragraph_plugin_activate':false,'author_name':'Ronald Emerson Scherolt da Costa','allow_members_to_edit':false},'position':17},{'id':103507,'abstract':'\u003Cp\u003ETecnologia a servi\u00e7o da seguran\u00e7a do cidad\u00e3o.\u003C/p\u003E','title':'Sinesp','categories':[{'name':'Seguran\u00e7a P\u00fablica','id':182,'slug':'seguranca-publica','image':null}],'image':{'url':'/image_uploads/dialoga/0000/0098/sinesp.png'},'setting':{'color':'#00ff00','moderate_comments':false,'comment_paragraph_plugin_activate':false,'author_name':'Ronald Emerson Scherolt da Costa','allow_members_to_edit':false},'position':12},{'id':103683,'abstract':'\u003Cp\u003ESa\u00fade n\u00e3o tem pre\u00e7o.\u003C/p\u003E','title':'Aqui tem Farm\u00e1cia Popular','categories':[{'name':'Sa\u00fade','id':180,'slug':'saude','image':null}],'image':{'url':'/image_uploads/dialoga/0000/0019/saude_nao_tem_preco.jpg'},'setting':{'color':'#e69138','moderate_comments':false,'comment_paragraph_plugin_activate':false,'author_name':'Ronald Emerson Scherolt da Costa','allow_members_to_edit':false},'position':5},{'id':103457,'abstract':'\u003Cp\u003EA\u00e7\u00e3o conjunta e coopera\u00e7\u00e3o transfronteiri\u00e7a.\u003C/p\u003E','title':'Prote\u00e7\u00e3o das Fronteiras','categories':[{'name':'Seguran\u00e7a P\u00fablica','id':182,'slug':'seguranca-publica','image':null}],'image':{'url':'/image_uploads/dialoga/0000/0110/fronteira_redim.jpg'},'setting':{'color':'#a64d79','moderate_comments':false,'comment_paragraph_plugin_activate':false,'author_name':'Ronald Emerson Scherolt da Costa','allow_members_to_edit':false},'position':15},{'id':103494,'abstract':'\u003Cp\u003EDa Educa\u00e7\u00e3o Infantil ao Ensino M\u00e9dio.\u003C/p\u003E','title':'Educa\u00e7\u00e3o B\u00e1sica','categories':[{'name':'Educa\u00e7\u00e3o','id':181,'slug':'educacao','image':null}],'image':{'url':'/image_uploads/dialoga/0000/0076/Educa__o_B_sica.jpg'},'setting':{'color':'#fce5cd','moderate_comments':false,'comment_paragraph_plugin_activate':false,'author_name':'Ronald Emerson Scherolt da Costa','allow_members_to_edit':false},'position':8},{'id':103359,'abstract':'\u003Cp\u003EAcesso a exames e consultas com especialistas.\u003C/p\u003E','title':'Mais Especialidades','categories':[{'name':'Sa\u00fade','id':180,'slug':'saude','image':null}],'image':{'url':'/image_uploads/dialoga/0000/0083/mais_especialidades1.png'},'setting':{'color':'#ea9999','moderate_comments':false,'comment_paragraph_plugin_activate':false,'author_name':'Ronald Emerson Scherolt da Costa','allow_members_to_edit':false},'position':2},{'id':103485,'abstract':'\u003Cp\u003ECaminho para uma educa\u00e7\u00e3o de qualidade.\u003C/p\u003E','title':'Valoriza\u00e7\u00e3o dos Professores','categories':[{'name':'Educa\u00e7\u00e3o','id':181,'slug':'educacao','image':null}],'image':{'url':'/image_uploads/dialoga/0000/0140/valorizacao_professor.jpg'},'setting':{'color':'#ffff00','moderate_comments':false,'comment_paragraph_plugin_activate':false,'author_name':'Ronald Emerson Scherolt da Costa','allow_members_to_edit':false},'position':11},{'id':103416,'abstract':'\u003Cp\u003EEstrutura adequada para atender melhor a popula\u00e7\u00e3o na aten\u00e7\u00e3o b\u00e1sica.\u003C/p\u003E','title':'Melhorar os Postos de Sa\u00fade','categories':[{'name':'Sa\u00fade','id':180,'slug':'saude','image':null}],'image':{'url':'/image_uploads/dialoga/0000/0053/requalif_redim.jpg'},'setting':{'color':'#cc4125','moderate_comments':false,'comment_paragraph_plugin_activate':false,'author_name':'Ronald Emerson Scherolt da Costa','allow_members_to_edit':false},'position':3}]}});
-
-      ArticleService.getHome(function(result){
-        expect(result.article).toBeDefined();
-        expect(result.article.title).toEqual('Dialoga Brasil');
-        expect(result.article.categories).toBeDefined();
-      });
-
-      httpBackend.flush();
-    });
-
-    // it('should return a list of articles', function() {
-
-    //   httpBackend.whenGET('http://login.dialoga.gov.br/api/v1/articles').respond({
-    //     "articles": [
-    //     {
-    //       abstract: "Que exista educação continuada permanente dos profissionais!!",
-    //       author: null,
-    //       body: "",
-    //       categories: [],
-    //       children: [],
-    //       created_at: "2015/08/04 16:36:13",
-    //       end_date: null,
-    //       hits: 0,
-    //       id: 120568,
-    //       image: null,
-    //       parent: {id: 103379,…},
-    //       position: null,
-    //       profile: {identifier: "dialoga", name: "dialoga", id: 19195, created_at: "2015/04/15 09:38:36", image: null},
-    //       setting: {comment_paragraph_plugin_activate: false, author_name: "estacio"},
-    //       start_date: null,
-    //       tag_list: [],
-    //       title: "article_f4f4601c-0f36-e90e-d01a-9871f0bd126b",
-    //       votes_against: 0,
-    //       votes_for: 0,
-    //     }
-    //     ]
-    //   });
-
-    //   ArticleService.getList().then(function(result) {
-    //     console.log('result', result);
-
-    //     expect(result.data.article).toBeDefined();
-    //     expect(result.data.article.title).toEqual('Dialoga Brasil');
-
-    //   });
-
-    //   httpBackend.flush();
-    // });
-  });
-})();
@@ -6,16 +6,12 @@
     .controller('DuvidasPageController', DuvidasPageController);
   /** @ngInject */
-  function DuvidasPageController(ArticleService, $state, $location, $scope, $rootScope, $log) {
+  function DuvidasPageController(DialogaService, $log) {
     $log.debug('DuvidasPageController');
     var vm = this;
-    vm.ArticleService = ArticleService;
-    vm.$state = $state;
-    vm.$location = $location;
-    vm.$scope = $scope;
-    vm.$rootScope = $rootScope;
+    vm.DialogaService = DialogaService;
     vm.$log = $log;
     vm.init();
@@ -24,12 +20,8 @@
   DuvidasPageController.prototype.init = function () {
     var vm = this;
-    var params = vm.$state.params;
-    var slug = params.slug;
+    vm.questions = null;
-    vm.article = null;
-    vm.categories = null;
-    vm.currentCategory = null;
     vm.loading = true;
     vm.error = false;
@@ -40,12 +32,11 @@
   DuvidasPageController.prototype.loadData = function () {
     var vm = this;
-    vm.ArticleService.getCategories(function(categories){
-      vm.categories = categories;
+    vm.DialogaService.getQuestions(function(questions){
+      vm.questions = questions;
     }, function (error) {
       vm.error = error;
       vm.$log.error(error);
     });
-
   };
 })();
@@ -0,0 +1,25 @@
+<div class="page--erro">
+  <div class="container">
+    <div class="row">
+      <div class="row-height">
+        <div class="col-sm-4 col-sm-height col-middle">
+          <div class="inside inside-full-height">
+            <div class="content">
+              <span class="icon-circle icon-wrapper-rounded">
+                <span class="glyphicon glyphicon-remove" aria-hidden></span>
+              </span>
+              <h1>Erro</h1>
+              <p>
+                <span style="font-weight:bold;">Mas você ainda pode:</span>
+                <br>
+                <!-- <button type="button" class="btn btn-link" ng-click="goBack()">retornar à página anterior</button> -->
+                <!-- <span>&#8226;</span> -->
+                <button type="button" class="btn btn-link" ui-sref="inicio">retornar à página inicial</button>
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
@@ -0,0 +1,38 @@
+.page--erro {
+    background-color: #f9f9f9;
+
+    h1 {
+        color: #464646;
+        font-size: 72px;
+        font-weight: bold;
+        margin-bottom: 40px;
+    }
+
+    .row-height {
+        min-height: 400px;
+    }
+
+    .content {
+        text-align: center;
+    }
+
+    .icon-circle {
+        display: inline-block;
+        font-size: 40px;
+        line-height: 33px;
+        font-weight: normal;
+
+        position: relative;
+        top: -5px;
+        padding: 20px;
+        margin-top: 5px;
+        margin-right: 30px;
+
+        color: #fff;
+        background: #c93e55;
+    }
+
+    h1 {
+        display: inline-block;
+    }
+}
@@ -3,7 +3,7 @@
   	<div class="row">
   	  <div class="col-xs-12 text-center">
   	    <a id="termos-de-uso" ui-sref="termos-de-uso">Termos de uso</a>
-        <a href="#header" class="pull-right" ng-click="scrollTo('#header')">Voltar para o topo</a>
+        <a href="#header" style="position:absolute;right:0;top:-10px;" ng-click="scrollTo('#header')">Voltar para o topo</a>
       </div>
   	</div>
   </div>
@@ -12,9 +12,9 @@
     </div>
   </div>
-  <div class="row">
+  <!-- <div class="row">
     <div class="col-sm-12">
       <div ncy-breadcrumb></div>
     </div>
-  </div>
+  </div> -->
 </header>
@@ -7,11 +7,12 @@
     .controller('InicioPageController', InicioPageController);
   /** @ngInject */
-  function InicioPageController(ArticleService, $rootScope, $sce, $log) {
+  function InicioPageController(DialogaService, $scope, $sce, $log) {
     var vm = this;
     // aliases
-    vm.ArticleService = ArticleService;
+    vm.DialogaService = DialogaService;
+    vm.$scope = $scope;
     vm.$sce = $sce;
     vm.$log = $log;
@@ -22,56 +23,95 @@
   InicioPageController.prototype.init = function() {
     var vm = this;
+    vm.article = null;
+    vm.themes = null;
+    vm.selectedTheme = null;
+    vm.programs = null;
+    vm.filtredPrograms = null;
+    vm.query = null;
+
     vm.error = null;
-    vm.loading = true;
-    vm.loadHomeArticle();
+
+    vm.loadData();
+    vm.attachListeners();
   };
-  InicioPageController.prototype.loadHomeArticle = function() {
+  InicioPageController.prototype.loadData = function() {
     var vm = this;
-    vm.content = vm.ArticleService.getHomeAbstract();
-    vm.isCached = !!vm.content;
+    vm.loading = true;
+    vm.loadingEvents = true;
+    vm.loadingThemes = true;
+    vm.loadingPrograms = true;
-    if (vm.isCached) {
-      hideBackground(2000);
-    }
+    // Load main content
+    vm.DialogaService.getHome(function(data) {
+      vm.article = data.article;
+
+      if (vm.article.videoIsLoaded) {
+        hideBackground(2000);
+      }
-    vm.ArticleService.getHome(function(data) {
+      loadAfterHome();
+      
       vm.loading = false;
-      vm.article = data.article;
     }, function(error) {
-      vm.$log.error('Error on getHome article.', error);
-      vm.error = 'Erro ao carregar o conteúdo principal.';
+      vm.$log.error('Error on getHome.', error);
     });
+
+    function loadAfterHome () {
+      // Load event list
+      // vm.DialogaService.getEvents(function(data) {
+      //   vm.events = data;
+      //   vm.loadingEvents = false;
+      // }, function(error) {
+      //   vm.$log.error('Error on getEvents.', error);
+      // });
+
+      // Load theme list
+      vm.DialogaService.getThemes(function(data) {
+        vm.themes = data;
+        vm.loadingThemes = false;
+      }, function(error) {
+        vm.$log.error('Error on getThemes.', error);
+      });
+
+      // Load program list
+      vm.DialogaService.getProgramsRandom(function(data) {
+        vm.programs = vm.article.children;
+        vm.filtredPrograms = data;
+        vm.loadingPrograms = false;
+      }, function(error) {
+        vm.$log.error('Error on getPrograms.', error);
+      });
+    }
+
   };
   InicioPageController.prototype.showVideo = function() {
     var vm = this;
     // we need handle home content
-    if (vm.isCached) {
+    if (vm.article.videoIsLoaded) {
       hideBackground(0); // force to hide
-      vm.$log.warn('The content already cached. Aborting.');
+      vm.$log.debug('The content already cached. Show-it!');
       return;
     }
-    vm.content = vm.handleHomeAbstract(vm.article.abstract);
-    vm.ArticleService.setHomeAbstract(vm.content);
-
     // inject dependencies
     injectIframeApiJs();
     window.onYouTubeIframeAPIReady = window.onYouTubeIframeAPIReady || onYouTubeIframeAPIReady;
     window.onYouTubePlayerReady = window.onYouTubePlayerReady || onYouTubePlayerReady;
+
+    vm.article.videoIsLoaded = true;
   };
-  InicioPageController.prototype.handleHomeAbstract = function(abstract) {
+  InicioPageController.prototype.attachListeners = function() {
     var vm = this;
-    abstract = forceIframeParams(abstract);
-    abstract = removeStylefromIframe(abstract);
-
-    return vm.$sce.trustAsHtml(abstract);
+    vm.$scope.$on('change-selectedCategory', function (selectedCategory) {
+      vm.selectedTheme = selectedCategory;
+    });
   };
   function injectIframeApiJs() {
@@ -102,51 +142,4 @@
     angular.element($elBg).fadeOut(ms || 100);
     // angular.element($elBg).hide();
   }
-
-  function forceIframeParams(abstract) {
-    var patternIframe = '<iframe src="';
-    var indexOfIframe = abstract.indexOf(patternIframe);
-
-    if (indexOfIframe === -1) {
-      return abstract;
-    }
-
-    var startSrcUrl = indexOfIframe + patternIframe.length;
-    var endSrcUrl = abstract.indexOf('"', startSrcUrl);
-    var srcUrl = abstract.substring(startSrcUrl , endSrcUrl);
-    var resultUrl = srcUrl;
-    var c = (srcUrl.indexOf('?') !== -1) ? '&' : ''; // already have url params. So, append-it
-
-    // enable js api
-    if (srcUrl.indexOf('enablejsapi=1') === -1) {
-      resultUrl += c + 'enablejsapi=1';
-      c = '&'; // force to always use '&' after here
-    }
-
-    // set opaque mode
-    if (srcUrl.indexOf('wmode=opaque') === -1) {
-      resultUrl += c + 'wmode=opaque';
-      // c = '&'; // force to always use '&' after here
-    }
-
-    abstract = abstract.replace(srcUrl, resultUrl);
-
-    return abstract;
-  }
-
-  function removeStylefromIframe (abstract) {
-    var patternIframe = 'style="';
-    var indexOfIframe = abstract.indexOf('<iframe');
-    var indexOfStyleOnIframe = abstract.indexOf('style="', indexOfIframe);
-
-    if (indexOfStyleOnIframe === -1) {
-      return abstract;
-    }
-
-    var startStyleContent = indexOfStyleOnIframe + patternIframe.length;
-    var endStyleContent = abstract.indexOf('"', startStyleContent);
-    var style = abstract.substring(startStyleContent , endStyleContent);
-
-    return abstract.replace(style, '');
-  }
 })();
-<section class="container" role="main">
-  <div class="row">
-    <div class="col-sm-10 col-sm-offset-1">
-      <div class="video-wrapper">
-        <div class="video-player js-youtube">
-          <div class="embed-responsive embed-responsive-16by9">
-            <div class="js-iframe" ng-show="pageInicio.content" ng-bind-html="pageInicio.content"></div>
-            <div class="video-background" ng-click="pageInicio.showVideo()">
-              <div class="video-thumbnail" aria-hidden="true" style="background-image:url(/assets/images/youtube-background.png)"></div>
-              <button class="video-play-button" aria-live="assertive" aria-label="Assistir o vídeo tutorial Dialoga Brasil">
-                <svg height="100%" version="1.1" viewBox="0 0 68 48" width="100%"><path class="ytp-play-button-bg" d="m .66,37.62 c 0,0 .66,4.70 2.70,6.77 2.58,2.71 5.98,2.63 7.49,2.91 5.43,.52 23.10,.68 23.12,.68 .00,-1.3e-5 14.29,-0.02 23.81,-0.71 1.32,-0.15 4.22,-0.17 6.81,-2.89 2.03,-2.07 2.70,-6.77 2.70,-6.77 0,0 .67,-5.52 .67,-11.04 l 0,-5.17 c 0,-5.52 -0.67,-11.04 -0.67,-11.04 0,0 -0.66,-4.70 -2.70,-6.77 C 62.03,.86 59.13,.84 57.80,.69 48.28,0 34.00,0 34.00,0 33.97,0 19.69,0 10.18,.69 8.85,.84 5.95,.86 3.36,3.58 1.32,5.65 .66,10.35 .66,10.35 c 0,0 -0.55,4.50 -0.66,9.45 l 0,8.36 c .10,4.94 .66,9.45 .66,9.45 z" fill="#1f1f1e" fill-opacity="0.9"></path><path d="m 26.96,13.67 18.37,9.62 -18.37,9.55 -0.00,-19.17 z" fill="#fff"></path><path d="M 45.02,23.46 45.32,23.28 26.96,13.67 43.32,24.34 45.02,23.46 z" fill="#ccc"></path></svg>
-              </button>
+<div class="page--inicio">
+  <section class="section-video" role="main">
+    <div class="container">
+      <div class="row">
+        <div class="col-sm-10 col-sm-offset-1">
+          <div class="video-wrapper">
+            <div class="video-player js-youtube">
+              <div class="embed-responsive embed-responsive-16by9">
+                <div class="js-iframe" ng-if="pageInicio.article.videoIsLoaded" ng-bind-html="pageInicio.article.abstractTrusted"></div>
+                <div class="video-background" ng-click="pageInicio.showVideo()">
+                  <div class="video-thumbnail" aria-hidden="true" style="background-image:url(/assets/images/youtube-background.png)"></div>
+                  <button class="video-play-button" aria-live="assertive" aria-label="Assistir o vídeo tutorial Dialoga Brasil">
+                    <svg height="100%" version="1.1" viewbox="0 0 68 48" width="100%"><path class="ytp-play-button-bg" d="m .66,37.62 c 0,0 .66,4.70 2.70,6.77 2.58,2.71 5.98,2.63 7.49,2.91 5.43,.52 23.10,.68 23.12,.68 .00,-1.3e-5 14.29,-0.02 23.81,-0.71 1.32,-0.15 4.22,-0.17 6.81,-2.89 2.03,-2.07 2.70,-6.77 2.70,-6.77 0,0 .67,-5.52 .67,-11.04 l 0,-5.17 c 0,-5.52 -0.67,-11.04 -0.67,-11.04 0,0 -0.66,-4.70 -2.70,-6.77 C 62.03,.86 59.13,.84 57.80,.69 48.28,0 34.00,0 34.00,0 33.97,0 19.69,0 10.18,.69 8.85,.84 5.95,.86 3.36,3.58 1.32,5.65 .66,10.35 .66,10.35 c 0,0 -0.55,4.50 -0.66,9.45 l 0,8.36 c .10,4.94 .66,9.45 .66,9.45 z" fill="#1f1f1e" fill-opacity="0.9"></path><path d="m 26.96,13.67 18.37,9.62 -18.37,9.55 -0.00,-19.17 z" fill="#fff"></path><path d="M 45.02,23.46 45.32,23.28 26.96,13.67 43.32,24.34 45.02,23.46 z" fill="#ccc"></path></svg>
+                  </button>
+                </div>
+              </div>
             </div>
           </div>
         </div>
       </div>
     </div>
-  </div>
-  <!-- <div class="js-event-wrapper hide" ng-show="inicio.eventListIsVisible"> -->
-  <div class="js-event-wrapper">
-    <event-list></event-list>
-  </div>
-</section>
+  </section>
-<section class="info-section" ng-if="pageInicio.loading || pageInicio.error">
-    <div class="container">
-      <div class="col-md-12">
-        <div ng-if="pageInicio.loading && !pageInicio.error">
-          <div class="alert alert-info">Carregando conteúdo...</div>
+  <section class="section-event">
+    <div ng-if="pageInicio.events">
+      <event-list events="[]"></event-list>
+    </div>
+    <div ng-if="!pageInicio.events && pageInicio.loadingEvents" class="container">
+      <div class="row">
+        <div class="col-sm-12">
+          <div class="alert alert-info" role="alert">Carregando lista de eventos.</div>
         </div>
-
-        <div ng-if="pageInicio.error">
-          <div class="alert alert-danger">{{pageInicio.error}}</div>
+      </div>
+    </div>
+    <div ng-if="!pageInicio.events && pageInicio.eventsError" class="container">
+      <div class="row">
+        <div class="col-sm-12">
+          <div class="alert alert-danger" role="alert">Não foi possível carregar a lista de eventos neste momento.</div>
         </div>
       </div>
     </div>
-</section>
+  </section>
-<section class="section-gray section-space-up" ng-if="pageInicio.article">
-  <div class="container">
-    <div id="lista-de-programas" class="row">
-      <div class="col-sm-4 col-md-3">
-        <category-list></category-list>
+  <section class="section-info" ng-if="pageInicio.loading || pageInicio.error">
+      <div class="container">
+        <div class="row">
+          <div class="col-md-12">
+            <div ng-if="pageInicio.loading && !pageInicio.error">
+              <div class="alert alert-info" role="alert">Carregando conteúdo...</div>
+            </div>
+          
+            <div ng-if="pageInicio.error">
+              <div class="alert alert-danger" role="alert">
+                Erro ao carregar o conteúdo principal.
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
-      <div class="col-sm-8 col-md-9">
-        <article-grid></article-grid>
+  </section>
+
+  <section class="section--articles section-gray section-space-up" ng-if="pageInicio.article">
+    <div class="container">
+      <div id="lista-de-programas" class="row">
+        <div class="col-sm-4 col-md-3">
+          <div ng-if="pageInicio.themes">
+            <category-list categories="pageInicio.themes" selected-category="pageInicio.selectedTheme"></category-list>
+          </div>
+          <div ng-if="!pageInicio.themes && pageInicio.loadingThemes">
+            <div class="alert alert-info" role="alert">
+              Carregando temas.
+            </div>
+          </div>
+          <div ng-if="!pageInicio.themes && pageInicio.themesError">
+            <div class="alert alert-danger" role="alert">
+              Não foi possível carregar a lista de temas neste momento.
+            </div>
+          </div>
+        </div>
+        <div class="col-sm-8 col-md-9">
+          <div class="row">
+            <header class="header">
+              <h2>Conheça os programas <span class="small">({{pageInicio.filtredPrograms.length}}/{{::pageInicio.programs.length}})</span></h2>
+              <button type="button" class="btn btn-link" ng-click="pageInicio.showAll($event)">
+                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> Ver todos os {{::pageInicio.programs.length}} programas
+              </button>
+            </header>
+          </div>
+          <div class="row">
+            <div class="col-xs-6 col-sm-7 col-md-9">
+              <label for="articleQueryFilter" class="control-label sr-only">Filtrar programas:</label>
+              <input id="articleQueryFilter" type="search" class="form-control" ng-model="pageInicio.query" placeholder="Filtrar programas" aria-label="Filtrar programas" >
+            </div>
+          </div>
+
+          <div ng-if="pageInicio.programs">
+            <article-grid articles="pageInicio.filtredPrograms"></article-grid>
+          </div>
+          <div ng-if="!pageInicio.programs && pageInicio.loadingPrograms">
+            <div class="alert alert-info" role="alert">
+              Carregando programas.
+            </div>
+          </div>
+          <div ng-if="!pageInicio.programs && pageInicio.programsError">
+            <div class="alert alert-danger" role="alert">
+              Não foi possível carregar a lista de programas neste momento.
+            </div>
+          </div>
+        </div>
       </div>
     </div>
-  </div>
-</section>
+  </section>
+</div>
+.page--inicio {
+    margin-top: 20px;
+
+    .section--articles {
+
+      .header {
+          position: relative;
+          height: 40px;
+          margin-bottom: 10px;
+
+          button {
+              position: absolute;
+              right: 0;
+              top: 2px;
+          }
+      }
+
+      .form-inline {
+          input,
+          select {
+              width: 100%;
+          }
+      }
+    }
+}
+
 .section-gray {
   background-color: $gray;
@@ -6,45 +6,46 @@
     .controller('ProgramaContentPageController', ProgramaContentPageController);
   /** @ngInject */
-  function ProgramaContentPageController(ArticleService, $state, $location, $scope, $rootScope, $log) {
+  function ProgramaContentPageController(DialogaService, $state, $scope, $rootScope, $log) {
     $log.debug('ProgramaContentPageController');
     var vm = this;
-    vm.ArticleService = ArticleService;
+    vm.DialogaService = DialogaService;
     vm.$state = $state;
-    vm.$location = $location;
     vm.$scope = $scope;
     vm.$rootScope = $rootScope;
     vm.$log = $log;
     vm.init();
+    vm.loadData();
+    vm.attachListeners();
   }
   ProgramaContentPageController.prototype.init = function() {
     var vm = this;
-    var params = vm.$state.params;
-
     vm.article = null;
     vm.category = null;
-    vm.loading = true;
-    vm.error = false;
-    vm.slug = params.slug;
-    vm.loadData();
-    vm.attachListeners();
+    vm.error = false;
   };
   ProgramaContentPageController.prototype.loadData = function() {
     var vm = this;
-    vm.ArticleService.getArticleBySlug(vm.slug, function(article) {
+    vm.loading = true;
+
+    // Get program by slug
+    var slug = vm.$state.params.slug;
+    vm.DialogaService.getProgramBySlug(slug, function(article) {
       vm.article = article;
       vm.category = vm.article.categories[0];
+      // update the breadcrumb
       vm.$rootScope.contentTitle = vm.article.title;
+      // set the banner image with full image path
       if (!vm.banner) {
         vm.banner = {
           src: vm.$rootScope.basePath + vm.article.image.url,
@@ -52,39 +53,37 @@
         };
       }
-      vm.loadContent();
-
+      vm.DialogaService.getProposalsByTopicId(vm.article.id, {}, function(data){
+        vm.proposals = data.children;
+        vm.proposalsTopRated = [
+          {abstract: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tristique consectetur neque, at tincidunt enim volutpat sit amet. Integer sed cursus metus, non luctus risus. Mauris elementum est quis vehicula ullamcorper.'},
+          {abstract: 'Mauris elementum est quis vehicula ullamcorper. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tristique consectetur neque, at tincidunt enim volutpat sit amet. Integer sed cursus metus, non luctus risus.'},
+          {abstract: 'Integer sed cursus metus, non luctus risus. Mauris elementum est quis vehicula ullamcorper. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tristique consectetur neque, at tincidunt enim volutpat sit amet.'},
+        ];
+      }, function (error) {
+        vm.$log.error(error);
+      });
+      
+      vm.loading = false;
     }, function(error) {
       vm.$log.error(error);
-      vm.$log.info('Rollback to home page.');
-      vm.$state.go('inicio', {}, {location: true});
+      vm.error = error;
+      vm.loading = false;
+      
+      // vm.$log.info('Rollback to home page.');
+      // vm.$state.go('inicio', {}, {location: true});
     });
+
   };
   ProgramaContentPageController.prototype.attachListeners = function() {
     var vm = this;
-    vm.$scope.$on('see-proposals', function() {
+    vm.$scope.$on('proposal-carousel:toProposals', function() {
       vm.$log.warn('TODO: handle see proposals / ranking');
     });
   };
-  ProgramaContentPageController.prototype.loadContent = function() {
-    var vm = this;
-
-    vm.loading = true;
-    if (!vm.article.body) {
-      vm.ArticleService.getContentById(vm.article.id, function(data) {
-        vm.article.body = data.article.body;
-        vm.loading = false;
-      }, function(error) {
-        vm.loading = false;
-        vm.error = error;
-      });
-    }
-    vm.loading = false;
-  };
-
   ProgramaContentPageController.prototype.makeProposal = function() {
     var vm = this;
@@ -6,16 +6,12 @@
     .controller('ProgramasPageController', ProgramasPageController);
   /** @ngInject */
-  function ProgramasPageController(ArticleService, $state, $location, $scope, $rootScope, $log) {
+  function ProgramasPageController(DialogaService, $log) {
     $log.debug('ProgramasPageController');
     var vm = this;
-    vm.ArticleService = ArticleService;
-    vm.$state = $state;
-    vm.$location = $location;
-    vm.$scope = $scope;
-    vm.$rootScope = $rootScope;
+    vm.DialogaService = DialogaService;
     vm.$log = $log;
     vm.init();
@@ -24,12 +20,10 @@
   ProgramasPageController.prototype.init = function () {
     var vm = this;
-    var params = vm.$state.params;
-    var slug = params.slug;
-
     vm.article = null;
     vm.categories = null;
     vm.currentCategory = null;
+
     vm.loading = true;
     vm.error = false;
@@ -40,37 +34,11 @@
   ProgramasPageController.prototype.loadData = function () {
     var vm = this;
-    vm.ArticleService.getCategories(function(categories){
-      vm.categories = categories;
+    vm.DialogaService.getTemas(function(temas){
+      vm.categories = temas;
     }, function (error) {
       vm.error = error;
       vm.$log.error(error);
     });
-
-    // vm.ArticleService.getArticleBySlug(slug, function(article){
-    //   vm.article = article;
-    //   vm.currentCategory = vm.article.categories[0];
-
-    //   // load proposals
-    //   // vm.ArticleService.getRandomProposal(program.id, function(proposal){
-    //   //   vm.article.proposal = proposal;
-    //   // }, function (error){
-    //   //   vm.$log.error(error);
-    //   // });
-
-    //   // load events
-    //   // vm.ArticleService.getEvents(program.id, function(proposal){
-    //   //   vm.article.proposal = proposal;
-    //   // }, function (error){
-    //   //   vm.$log.error(error);
-    //   // });
-
-    // }, function (error) {
-    //   vm.error = error;
-    //   vm.$log.error(error);
-    //   vm.$log.info('Rollback to home page.');
-    //   vm.$state.go('inicio', {}, {location: true});
-    // });
-
   };
 })();
+<div class="container">
+  <div class="row">
+    <div class="col-sm-12">
+      <div ncy-breadcrumb></div>
+    </div>
+  </div>
+</div>
+
 <div class="page--conheca-o-programa">
   <section>
     <div class="container">
-      <div ng-if="!pageProgramaContent.article.body">
-        <div ng-if="!pageProgramaContent.error" class="alert alert-info" role="alert">Carregando detalhes sobre o progama...</div>
-        <div ng-if="pageProgramaContent.error" class="alert alert-warning" role="alert">{{pageProgramaContent}}</div>
+      <div class="row">
+        <div class="col-sm-12">
+          <div ng-if="!pageProgramaContent.article && pageProgramaContent.loading" class="alert alert-info" role="alert">Carregando detalhes sobre o progama...</div>
+          <div ng-if="!pageProgramaContent.article && pageProgramaContent.error" class="alert alert-warning" role="alert">Erro ao carregar o programa.</div>
+        </div>
       </div>
     </div>
   </section>
@@ -11,56 +21,59 @@
   <div ng-if="pageProgramaContent.article.body" ng-class="pageProgramaContent.category.slug">
     <section>
       <div class="container">
-        <article class="program-preview">
-          <div class="row">
-            <div class="col-md-12">
-              <h1 class="program-preview--title color-theme-fg">{{::pageProgramaContent.article.title}}</h1>
-            </div>
-            <div class="col-md-8">
-              <div class="program-preview--box contraste-box">
-                <div class="program-preview--banner" ng-style="{'background-image':'url( {{::pageProgramaContent.banner.src}} )'}"></div>
-                <div class="program-preview--box--content-wrapper">
-                  <div class="program-preview--icon icon-wrapper-rounded color-theme-bg" ng-class="pageProgramaContent.category.slug">
-                    <span class="icon" ng-class="'icon-tema-' + pageProgramaContent.category.slug"></span>
-                  </div>
-                  <div class="program-preview--abstract color-theme-fg">
-                    <h2>{{::stripHtml(pageProgramaContent.article.abstract)}}</h2>
-                  </div>
-                  <div class="program-preview--abstract-details">
-                    <p>Lorem ipsum dolor sit amet, ea veniam mucius ocurreret vix, ius ex nisl vidisse partiendo. Blandit nominavi cum ei, paulo quaestio his ei, eum minim salutandi in. Civibus albucius in quo, et eam posse facilisis. Debet suavitate sea ut, his ei feugiat fastidii eleifend. Quo ex quando maiestatis voluptatum, mel te perpetua maiestatis, sit ceteros legendos deserunt ea. Enim dolores moderatius eu pro, ad quo ignota aliquid meliore.</p>
-                  </div>
-                  <div class="program-preview--share">
-                    <ul class="list-inline">
-                      <li>Compartilhe este programa:</li>
-                      <li><social-share class="program-preview--share-directive"></social-share></li>
-                    </ul>
-                  </div>
-                  <div class="program-preview--make-proposal">
-                    <div class="row">
-                      <div class="col-sm-6">
-                        <div class="button--themed">
-                          <button type="button" class="btn btn-block" ng-click="pageProgramaContent.makeProposal()">Faça uma proposta</button>
+        <div class="row">
+          <article class="program-preview">
+            
+              <div class="col-md-12">
+                <h1 class="program-preview--title color-theme-fg">{{::pageProgramaContent.article.title}}</h1>
+              </div>
+              <div class="col-md-8">
+                <div class="program-preview--box contraste-box">
+                  <div class="program-preview--banner" ng-style="{'background-image':'url( {{::pageProgramaContent.banner.src}} )'}"></div>
+                  <div class="program-preview--box--content-wrapper">
+                    <div class="program-preview--icon icon-wrapper-rounded color-theme-bg" ng-class="pageProgramaContent.category.slug">
+                      <span class="icon" ng-class="'icon-tema-' + pageProgramaContent.category.slug"></span>
+                    </div>
+                    <div class="program-preview--abstract color-theme-fg">
+                      <h2>{{::stripHtml(pageProgramaContent.article.abstract)}}</h2>
+                    </div>
+                    <div class="program-preview--abstract-details">
+                      <p>Lorem ipsum dolor sit amet, ea veniam mucius ocurreret vix, ius ex nisl vidisse partiendo. Blandit nominavi cum ei, paulo quaestio his ei, eum minim salutandi in. Civibus albucius in quo, et eam posse facilisis. Debet suavitate sea ut, his ei feugiat fastidii eleifend. Quo ex quando maiestatis voluptatum, mel te perpetua maiestatis, sit ceteros legendos deserunt ea. Enim dolores moderatius eu pro, ad quo ignota aliquid meliore.</p>
+                    </div>
+                    <div class="program-preview--share">
+                      <ul class="list-inline">
+                        <li>Compartilhe este programa:</li>
+                        <li><social-share class="program-preview--share-directive"></social-share></li>
+                      </ul>
+                    </div>
+                    <div class="program-preview--make-proposal">
+                      <div class="row">
+                        <div class="col-sm-6">
+                          <div class="button--themed">
+                            <button type="button" class="btn btn-block" ng-click="pageProgramaContent.makeProposal()">Faça uma proposta</button>
+                          </div>
                         </div>
                       </div>
                     </div>
                   </div>
                 </div>
               </div>
-            </div>
-            <div class="col-md-4">
-              <div class="row">
-                <div class="col-xs-12">
-                  <h3 class="color-theme-fg">Propostas mais votadas</h3>
-                  <proposal-ranking limit="'3'" display="'carousel'"></proposal-ranking>
-                </div>
-                <div class="col-xs-12">
-                  <h3 class="color-theme-fg">Propostas nesse programa</h3>
-                  <proposal-related article="pageProgramaContent.article"></proposal-related>
+              <div class="col-md-4">
+                <div class="row">
+                  <div class="col-xs-12">
+                    <h3 class="color-theme-fg">Propostas mais votadas</h3>
+                    <div ng-if="pageProgramaContent.proposalsTopRated">
+                      <proposal-carousel proposals="pageProgramaContent.proposalsTopRated"></proposal-carousel>
+                    </div>
+                  </div>
+                  <div class="col-xs-12">
+                    <h3 class="color-theme-fg">Propostas nesse programa</h3>
+                    <proposal-related article="pageProgramaContent.article"></proposal-related>
+                  </div>
                 </div>
               </div>
-            </div>
-          </div>
-        </article>
+          </article>
+        </div>
       </div>
     </section>
@@ -69,16 +82,16 @@
         <div class="proposal-ranking-section-header">
           <h3 class="color-theme-fg">Resultados de propostas mais votadas</h3>
         </div>
-        <div class="proposal-ranking-section-table">
-          <proposal-ranking limit="'5'" display="'list'"></proposal-ranking>
+        <div class="proposal-ranking-section-table" ng-if="pageProgramaContent.proposals">
+          <proposal-list proposals="pageProgramaContent.proposals"></proposal-list>
         </div>
       </div>
     </section>
-
-    <article class="program-content">
-      <div class="row">
-        <section ng-bind-html="pageProgramaContent.article.body"></section>
-      </div>
-    </article>
+    
+    <section class="section-content">
+      <article class="program-content" ng-if="pageProgramaContent.article">
+          <div ng-bind-html="pageProgramaContent.article.body"></div>
+      </article>
+    </section>
   </div>
 </div>
+<div class="container">
+  <div class="row">
+    <div class="col-sm-12">
+      <div ncy-breadcrumb></div>
+    </div>
+  </div>
+</div>
+
 <div class="page--programas">
   <section class="section-gray section-space-up">
     <div class="container">
+<div class="container">
+  <div class="row">
+    <div class="col-sm-12">
+      <div ncy-breadcrumb></div>
+    </div>
+  </div>
+</div>
+
 <div class="container page--propostas">
   <h1>TODO: Home > Proposta</h1>
 </div>
@@ -6,16 +6,12 @@
     .controller('PropostasPageController', PropostasPageController);
   /** @ngInject */
-  function PropostasPageController(ArticleService, $state, $location, $scope, $rootScope, $log) {
+  function PropostasPageController(DialogaService, $log) {
     $log.debug('PropostasPageController');
     var vm = this;
-    vm.ArticleService = ArticleService;
-    vm.$state = $state;
-    vm.$location = $location;
-    vm.$scope = $scope;
-    vm.$rootScope = $rootScope;
+    vm.DialogaService = DialogaService;
     vm.$log = $log;
     vm.init();
@@ -24,9 +20,6 @@
   PropostasPageController.prototype.init = function () {
     var vm = this;
-    var params = vm.$state.params;
-    var slug = params.slug;
-
     vm.article = null;
     vm.categories = null;
     vm.currentCategory = null;
@@ -40,7 +33,7 @@
   PropostasPageController.prototype.loadData = function () {
     var vm = this;
-    vm.ArticleService.getCategories(function(categories){
+    vm.DialogaService.getCategories(function(categories){
       vm.categories = categories;
     }, function (error) {
       vm.error = error;
+<div class="container">
+  <div class="row">
+    <div class="col-sm-12">
+      <div ncy-breadcrumb></div>
+    </div>
+  </div>
+</div>
+
 <div class="container page--propostas">
   <h1>TODO: Home > Propostas</h1>
 </div>
	@@ -0,0 +1,7 @@		@@ -0,0 +1,7 @@
		1	+- Erro com `lwip` ou `make: g++: Command not found`
		2	+ - Solução:
		3	+ 1. Instalar dependências do g++: `sudo apt-get install build-essential g++`
		4	+ 2. Reinstalar o sprity:
		5	+ 1. desinstalar: ``npm uninstall sprity``
		6	+ 2. limpar cache: ``npm cache clear``
		7	+ 3. instalar: ``npm install sprity``
0	\ No newline at end of file	8	\ No newline at end of file
	@@ -9,7 +9,7 @@		@@ -9,7 +9,7 @@
9	function articleGrid() {	9	function articleGrid() {
10		10
11	/** @ngInject */	11	/** @ngInject */
12	- function ArticleGridController($scope, $rootScope, $element, ArticleService, $location, $filter, $log) {	12	+ function ArticleGridController($scope, $rootScope, $element, $location, $filter, $log) {
13	$log.debug('ArticleGridController');	13	$log.debug('ArticleGridController');
14		14
15	// alias	15	// alias
	@@ -19,7 +19,6 @@		@@ -19,7 +19,6 @@
19	vm.$scope = $scope;	19	vm.$scope = $scope;
20	vm.$rootScope = $rootScope;	20	vm.$rootScope = $rootScope;
21	vm.$element = $element;	21	vm.$element = $element;
22	- vm.ArticleService = ArticleService;
23	vm.$location = $location;	22	vm.$location = $location;
24	vm.$filter = $filter;	23	vm.$filter = $filter;
25	vm.$log = $log;	24	vm.$log = $log;
	@@ -27,280 +26,24 @@		@@ -27,280 +26,24 @@
27		26
28	// initialization	27	// initialization
29	vm.init();	28	vm.init();
		29	+ vm.attachListeners();
30	}	30	}
31		31
32	ArticleGridController.prototype.init = function() {	32	ArticleGridController.prototype.init = function() {
33	- var vm = this;
34	-
35	- vm.articles = null;
36	- vm.filtredArticleList = null;
37	- vm.categories = null;
38	-
39	- vm.orderCriteries = [
40	- { label: 'Título', name: 'titulo' },
41	- { label: 'Tema', name: 'tema' },
42	- { label: 'Aleatório', name: 'aleatorio' }
43	- ];
44	-
45	- vm.search = vm.$location.search();
46	-
47	- // Add initial values for the filter
48	- vm.query = (vm.search && vm.search.filtro) ? vm.search.filtro : null;
49	- vm.limitTo = (vm.search && vm.search.limite) ? parseInt(vm.search.limite, 10) : vm.defaultLimit;
50	- vm.orderCriteria = (vm.search && vm.search.ordem) ? { name: vm.search.ordem } : null;
51	- vm.reverse = (vm.search && vm.search.reverso) ? true : false;
52	-
53	- // vm.selectedCategory = (vm.search && vm.search.tema) ? vm.getCategoryBySlug(vm.search.tema) : null;
54	- if (vm.search && vm.search.tema) {
55	- var slug = vm.search.tema;
56	- vm.ArticleService.getCategoryBySlug(slug, function(category){
57	- vm.selectedCategory = category;
58	- }, function(error){
59	- vm.$log.error('Error when try to "getCategoryBySlug"', error);
60	- });
61	- }
62	-
63	- if (!angular.equals({}, vm.search)) {
64	- var $el = vm.$element;
65	- angular.element('body').animate({scrollTop: $el.offset().top}, 'slow');
66	- }
67	-
68	- vm.loadData(function(){
69	- vm.filtredArticleList = vm.getFiltredArticles();
70	- });
71	-
72	- vm.attachListeners();	33	+ // var vm = this;
		34	+ // vm.programs = null; // scope var
73	};	35	};
74		36
75	ArticleGridController.prototype.attachListeners = function() {	37	ArticleGridController.prototype.attachListeners = function() {
76	- var vm = this;
77	-
78	- // update window location params
79	- vm.$scope.$on('change-selectedCategory', function(event, selectedCategory){
80	- vm.selectedCategory = selectedCategory;
81	- });
82	-
83	- vm.$scope.$watch('vm.query', function(newValue/, oldValue/) {
84	- vm.search.filtro = newValue ? newValue : null;
85	- vm.$location.search('filtro', vm.search.filtro);
86	- if(vm.search.filtro){
87	- vm.limitTo = vm.articles.length;
88	- }else{
89	- vm.limitTo = vm.defaultLimit;
90	- }
91	- vm.filtredArticleList = vm.getFiltredArticles();
92	- });
93	-
94	- vm.$scope.$watch('vm.limitTo', function(newValue/, oldValue/) {
95	- vm.search.limite = (newValue && newValue !== vm.defaultLimit) ? newValue : null;
96	- vm.$location.search('limite', vm.search.limite);
97	- vm.filtredArticleList = vm.getFiltredArticles();
98	- });
99	-
100	- vm.$scope.$watch('vm.selectedCategory', function(newValue/, oldValue/) {
101	- vm.search.tema = newValue ? newValue.slug : null;
102	- vm.$location.search('tema', vm.search.tema);
103	- if(vm.search.tema){
104	- vm.limitTo = vm.articles.length;
105	- }else{
106	- vm.limitTo = vm.defaultLimit;
107	- }
108	- vm.filtredArticleList = vm.getFiltredArticles();
109	- });
110	-
111	- vm.$scope.$watch('vm.orderCriteria', function(newValue/, oldValue/) {
112	- vm.search.ordem = (newValue && newValue.name) ? newValue.name : null;
113	- vm.$location.search('ordem', vm.search.ordem);
114	- vm.filtredArticleList = vm.getFiltredArticles();
115	- });
116	-
117	- vm.$scope.$watch('vm.reverse', function(newValue/, oldValue/) {
118	- vm.search.reverso = newValue ? newValue : null;
119	- vm.$location.search('reverso', vm.search.reverso);
120	- vm.filtredArticleList = vm.getFiltredArticles();
121	- });
122	-
123	- };
124	- ArticleGridController.prototype.loadData = function(cb) {
125	- var vm = this;
126	-
127	- var articlesLoaded = false;
128	- var categoriesLoaded = false;
129	-
130	- vm.ArticleService.getPrograms(function(programs){
131	- vm.articles = programs;
132	- articlesLoaded = true;
133	- endLoad();
134	- });
135	-
136	- vm.ArticleService.getCategories(function(categories){
137	- vm.categories = categories;
138	- categoriesLoaded = true;
139	- endLoad();
140	- });
141	-
142	- function endLoad () {
143	- if(articlesLoaded && categoriesLoaded){
144	- cb();
145	- }
146	- }
147	- };
148	-
149	- ArticleGridController.prototype.resetFilterValues = function() {
150	- var vm = this;
151	-
152	- vm.query = null;
153	- vm.limitTo = vm.defaultLimit;
154	- vm.selectedCategory = null;
155	- vm.orderCriteria = null;
156	- };
157	-
158	- ArticleGridController.prototype.getIconClasses = function(category) {
159	- var vm = this;
160	-
161	- vm.$log.debug('[TODO] getIconClasses of category:', category);
162	- return 'glyphicon glyphicon-exclamation-sign';
163	- };
164	-
165	- ArticleGridController.prototype.getCategoryBySlug = function(categorySlug) {
166	- var vm = this;
167	- var result = null;
168	-
169	- angular.forEach(vm.categories, function(value/, key/) {
170	- if (value.slug === categorySlug) {
171	- result = value;
172	- }
173	- });
174	-
175	- return result;
176	- };
177	-
178	- ArticleGridController.prototype.showAll = function($event) {
179	- var vm = this;
180	-
181	- $event.stopPropagation();
182	-
183	- vm.resetFilterValues();
184	- vm.limitTo = vm.articles.length;
185	- };
186	-
187	- ArticleGridController.prototype.getFiltredArticles = function() {
188	- var vm = this;
189	-
190	- if(!vm.articles){
191	- vm.$log.warn('No articles loaded yet. Abort.');
192	- return null;
193	- }
194	-
195	- var input = vm.articles;
196	- var output = input;
197	- var query = vm.query;
198	- var selectedCategory = vm.selectedCategory;
199	- var orderCriteria = vm.orderCriteria ? vm.orderCriteria : { name : 'aleatorio'};
200	- var filter = vm.$filter('filter');
201	- var orderBy = vm.$filter('orderBy');
202	- var limitTo = vm.$filter('limitTo');
203	- var limit = vm.limitTo ? vm.limitTo : 4;
204	-
205	- if (selectedCategory) {
206	- output = _filterByCategory(output, selectedCategory);
207	- }
208	-
209	- if (query) {
210	- output = filter(output, query, false);
211	- }
212	-
213	- switch (orderCriteria.name) {
214	- case 'titulo':
215	- output = orderBy(output, 'title', vm.reverse);
216	- break;
217	- case 'tema':
218	- output = orderBy(output, 'categories[0].name', vm.reverse);
219	- break;
220	- case 'more_participants':
221	- vm.$log.info('Criteria not handled yet: ', orderCriteria);
222	- break;
223	- case 'aleatorio':
224	- // shuffling
225	- // if (!vm._isShuffled){
226	- output = vm.filterShuffle(output);
227	- // vm._isShuffled = true;
228	- // }
229	-
230	- if (vm.reverse) {
231	- output = output.slice().reverse();
232	- }
233	-
234	- break;
235	- default:
236	- vm.$log.warn('Criteria not matched: ', orderCriteria);
237	- break;
238	- }
239	-
240	- output = limitTo(output, limit);
241	-
242	- return output;
243	- };
244	-
245	- ArticleGridController.prototype.filterShuffle = function(input) {
246	- var result = [];
247	- var resultByCategory = {};
248	-
249	- // divide by categories
250	- for (var i = 0; i < input.length; i++) {
251	- var program = input[i];
252	- var categorySlug = program.categories[0].slug;
253	-
254	- if (!resultByCategory[categorySlug]) {
255	- resultByCategory[categorySlug] = [];
256	- }
257	-
258	- resultByCategory[categorySlug].push(program);
259	- }
260	-
261	- // shuffle each array
262	- var prop = null;
263	- var categoryWithPrograms = null;
264	- for (prop in resultByCategory) {
265	- if (resultByCategory.hasOwnProperty(prop)) {
266	- categoryWithPrograms = resultByCategory[prop];
267	- resultByCategory[prop] = shuffle(categoryWithPrograms);
268	- }
269	- }
270	-
271	- // Concat all into result array
272	- // > while has program at Lists on resultByCategory
273	- var hasProgram = true;
274	- while (hasProgram) {
275	-
276	- var foundProgram = false;
277	- // each categoryList with array of program
278	- prop = null;
279	- categoryWithPrograms = null;
280	- for (prop in resultByCategory) {
281	-
282	- if (resultByCategory.hasOwnProperty(prop)) {
283	- categoryWithPrograms = resultByCategory[prop];
284	-
285	- if (categoryWithPrograms.length > 0) {
286	- var pivotProgram = categoryWithPrograms.pop();
287	- result.push(pivotProgram);
288	- foundProgram = true;
289	- }
290	- }
291	- }
292	-
293	- if (!foundProgram) {
294	- hasProgram = false;
295	- }
296	- }
297	-
298	- return result;	38	+ // var vm = this;
299	};	39	};
300		40
301	var directive = {	41	var directive = {
302	restrict: 'E',	42	restrict: 'E',
303	templateUrl: 'app/components/article-grid/article-grid.html',	43	templateUrl: 'app/components/article-grid/article-grid.html',
		44	+ scope: {
		45	+ articles: '='
		46	+ },
304	controller: ArticleGridController,	47	controller: ArticleGridController,
305	controllerAs: 'vm',	48	controllerAs: 'vm',
306	bindToController: true	49	bindToController: true
	@@ -308,44 +51,4 @@		@@ -308,44 +51,4 @@
308		51
309	return directive;	52	return directive;
310	}	53	}
311	-
312	- function _filterByCategory (input, category) {
313	- input = input \|\| [];
314	-
315	- if (!category) {
316	- // no filter
317	- return input;
318	- }
319	-
320	- var out = [];
321	- for (var i = 0; i < input.length; i++) {
322	- var program = input[i];
323	- if (program.categories[0].slug === category.slug) {
324	- out.push(program);
325	- }
326	- }
327	-
328	- return out;
329	- }
330	-
331	- // -> Fisher–Yates shuffle algorithm
332	- function shuffle (array) {
333	- var currentIndex = array.length, temporaryValue, randomIndex ;
334	-
335	- // While there remain elements to shuffle...
336	- while (0 !== currentIndex) {
337	-
338	- // Pick a remaining element...
339	- randomIndex = Math.floor(Math.random() * currentIndex);
340	- currentIndex -= 1;
341	-
342	- // And swap it with the current element.
343	- temporaryValue = array[currentIndex];
344	- array[currentIndex] = array[randomIndex];
345	- array[randomIndex] = temporaryValue;
346	- }
347	-
348	- return array;
349	- }
350	-
351	})();	54	})();
1	-<article class="article-grid">
2	- <header class="header">
3	- <h2>Conheça os programas <span class="small">({{vm.filtredArticleList.length}}/{{vm.articles.length}})</span></h2>
4	- <button type="button" class="btn btn-link" ng-click="vm.showAll($event)">
5	- <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> Ver todos os {{vm.articles.length}} programas
6	- </button>
7	- </header>
8	- <div>
9	- <div class="col-sm-12">
10	- <aside class="form-inline">
11	- <div class="row">
12	- <div class="col-xs-6 col-sm-7 col-md-9">
13	- <label for="articleQueryFilter" class="control-label sr-only">Filtrar programas:</label>
14	- <input id="articleQueryFilter" type="search" class="form-control" ng-model="vm.query" placeholder="Filtrar programas" aria-label="Filtrar programas" >
15	- </div>
16	-
17	- <!-- <label for="selectCategoryFilter" class="control-label sr-only">Filtrar por tema:</label>
18	- <select id="selectCategoryFilter" name="selectCategoryFilter" class="form-control" ng-model="vm.categoryFilter" ng-options="category.name for category in vm.categories track by category.slug">
19	- <option value="">-- Filtrar por tema --</option>
20	- </select> -->
21	-
22	- <div class="col-xs-6 col-sm-5 col-md-3">
23	- <label for="articleOrderByFilter" class="control-label sr-only">Ordernar por:</label>
24	- <select id="articleOrderByFilter" name="articleOrderByFilter" class="form-control pull-right" ng-model="vm.orderCriteria" ng-options="orderCriteria.label for orderCriteria in vm.orderCriteries">
25	- <option value="">-- Ordernar por: --</option>
26	- </select>
27	- </div>
28	- <!-- <div class="checkbox">
29	- <label>
30	- <input type="checkbox" ng-model="vm.reverse">
31	- Reverso
32	- </label>
33	- </div> -->
34	-
35	- <!-- <input id="articleLimitFilter" type="number" class="form-control input-sm" size="4" step="2" ng-model="vm.limitTo" aria-label="Limitar" >
36	- <label for="articleLimitFilter" class="control-label">Limite</label> -->
37	-
38	- </div>
39	- </aside>
40	- </div>
41	-
42	- <div ng-repeat="article in vm.filtredArticleList as results">
43	- <article-box article="article" class="col-xs-12 col-sm-6"></article-box>
44	- <div ng-if="$odd" class="clearfix"></div>
45	- </div>
46	- <div class="animate-repeat" ng-if="results.length == 0">
47	- Nenhum programa encontrado.
48	- </div>	1	+<div class="article-grid">
		2	+ <div ng-repeat="article in vm.articles as results">
		3	+ <article-box article="article" category="article.categories[0]" class="col-xs-12 col-sm-6"></article-box>
		4	+ <div ng-if="$odd" class="clearfix"></div>
49	</div>	5	</div>
50	-</article>	6	+ <div class="animate-repeat" ng-if="results.length == 0">
		7	+ Nenhum programa encontrado.
		8	+ </div>
		9	+</div>
1	.article-grid {	1	.article-grid {
2	- .header {
3	- position: relative;
4	- height: 40px;
5	- margin-bottom: 10px;
6	-
7	- button {
8	- position: absolute;
9	- right: 0;
10	- top: 2px;
11	- }
12	- }
13	-
14	- .form-inline {
15	- input,
16	- select {
17	- width: 100%;
18	- }
19	- }
20	}	2	}
@@ -0,0 +1,159 @@		@@ -0,0 +1,159 @@
	1	+(function() {
	2	+ 'use strict';
	3	+
	4	+ angular
	5	+ .module('dialoga')
	6	+ .factory('ArticleService', ArticleService);
	7	+
	8	+ /** @ngInject */
	9	+ function ArticleService($http, $q, $rootScope, API, UtilService, Slug, $log) {
	10	+ $log.debug('ArticleService');
	11	+
	12	+ var service = {
	13	+ apiArticles: $rootScope.basePath + '/api/v1/articles/',
	14	+ getArticleById: getArticleById,
	15	+ getArticleBySlug: getArticleBySlug,
	16	+ getCategories: getCategories,
	17	+ getCategoryBySlug: getCategoryBySlug,
	18	+ getTopics: getTopics,
	19	+ getTopicById: getTopicById,
	20	+ getProposals: getProposals,
	21	+ getProposalsByTopicId: getProposalsByTopicId,
	22	+ searchTopics: searchTopics,
	23	+ searchProposals: searchProposals
	24	+ };
	25	+
	26	+ return service;
	27	+
	28	+ function _getArticleById (articleId, params, cbSuccess, cbError) {
	29	+
	30	+ var url = service.apiArticles + articleId;
	31	+ var paramsExtended = angular.extend({}, params);
	32	+
	33	+ UtilService.get(url, {params: paramsExtended}).then(function(data){
	34	+ cbSuccess(data);
	35	+ }).catch(function(error){
	36	+ cbError(error);
	37	+ });
	38	+ }
	39	+
	40	+ function getArticleById (articleId, params, cbSuccess, cbError) {
	41	+ _getArticleById(articleId, params, cbSuccess, cbError);
	42	+ }
	43	+
	44	+ function getArticleBySlug (/slug, params, cbSuccess, cbError/) {
	45	+ throw { name: 'NotImplementedYet', message: 'The service "getArticleBySlug" is not implemented yet.'};
	46	+ }
	47	+
	48	+ function getCategories (articleId, cbSuccess, cbError) {
	49	+ // Ex.: /api/v1/articles/103358?fields=
	50	+
	51	+ var url = service.apiArticles + articleId;
	52	+
	53	+ UtilService.get(url, {params: {
	54	+ 'fields[]': ['id', 'categories']
	55	+ }}).then(function(data){
	56	+ cbSuccess(data);
	57	+ }).catch(function(error){
	58	+ cbError(error);
	59	+ });
	60	+ }
	61	+
	62	+ function getCategoryBySlug () {
	63	+ throw { name: 'NotImplementedYet', message: 'The service "getArticleBySlug" is not implemented yet.'};
	64	+ }
	65	+
	66	+ function getTopics (cbSuccess, cbError) {
	67	+ // Ex.: /api/v1/articles/103358/children?fields=
	68	+
	69	+ var url = service.apiArticles + API.articleId.home + '/children';
	70	+
	71	+ UtilService.get(url, {params: {
	72	+ 'fields[]': ['id', 'title', 'slug', 'abstract', 'categories', 'setting', 'children_count', 'hits']
	73	+ }}).then(function(data){
	74	+ cbSuccess(data);
	75	+ }).catch(function(error){
	76	+ cbError(error);
	77	+ });
	78	+ }
	79	+
	80	+ function getTopicById (topicId, cbSuccess, cbError) {
	81	+ // Ex.: /api/v1/articles/103358/children/121521?fields=
	82	+
	83	+ // var url = service.apiArticles + API.articleId.home + '/children/' + topicId; // dont need to chain
	84	+ var url = service.apiArticles + topicId;
	85	+
	86	+ UtilService.get(url, {params: {
	87	+ 'fields[]': ['id', 'title', 'body', 'slug', 'abstract', 'categories', 'setting', 'children_count', 'hits']
	88	+ }}).then(function(data){
	89	+ cbSuccess(data);
	90	+ }).catch(function(error){
	91	+ cbError(error);
	92	+ });
	93	+ }
	94	+
	95	+ function getProposals (params, cbSuccess, cbError) {
	96	+ // Ex.: /api/v1/articles/103358?fields=
	97	+
	98	+ var url = service.apiArticles + API.articleId.home;
	99	+
	100	+ var paramsExtended = angular.extend({
	101	+ 'fields[]': ['id', 'title', 'slug', 'abstract', 'categories', 'setting', 'children_count', 'hits'],
	102	+ 'content_type':'ProposalsDiscussionPlugin::Proposals'
	103	+ }, params);
	104	+
	105	+ UtilService.get(url, {params: paramsExtended}).then(function(data){
	106	+ cbSuccess(data);
	107	+ }).catch(function(error){
	108	+ cbError(error);
	109	+ });
	110	+ }
	111	+
	112	+ function getProposalsByTopicId (topicId, params, cbSuccess, cbError) {
	113	+ var url = service.apiArticles + topicId;
	114	+
	115	+ var paramsExtended = angular.extend({
	116	+ 'fields[]': ['id', 'title', 'abstract', 'children', 'children_count'],
	117	+ 'content_type':'ProposalsDiscussionPlugin::Proposals'
	118	+ }, params);
	119	+
	120	+ UtilService.get(url, {params: paramsExtended}).then(function(data){
	121	+ cbSuccess(data);
	122	+ }).catch(function(error){
	123	+ cbError(error);
	124	+ });
	125	+ }
	126	+
	127	+ function getRandomProposal (cbSuccess, cbError) {}
	128	+
	129	+ function searchTopics (params, cbSuccess, cbError) {
	130	+ // Ex.: /api/v1/search/article?type=ProposalsDiscussionPlugin::Topic&query=cisternas
	131	+ var url = '/api/v1/search/article';
	132	+ var paramsExtended = angular.extend({
	133	+ 'fields[]': ['id', 'title', 'slug', 'abstract', 'categories', 'setting', 'children_count', 'hits'],
	134	+ 'type': 'ProposalsDiscussionPlugin::Topic'
	135	+ }, params);
	136	+
	137	+ UtilService.get(url, {params: paramsExtended}).then(function(data){
	138	+ cbSuccess(data);
	139	+ }).catch(function(error){
	140	+ cbError(error);
	141	+ });
	142	+ }
	143	+
	144	+ function searchProposals (params, cbSuccess, cbError) {
	145	+ // Ex.: /api/v1/search/article?type=ProposalsDiscussionPlugin::Proposal&query=cisternas
	146	+ var url = '/api/v1/search/article';
	147	+ var paramsExtended = angular.extend({
	148	+ 'fields[]': ['id', 'title', 'slug', 'abstract', 'categories', 'setting', 'children_count', 'hits'],
	149	+ 'type': 'ProposalsDiscussionPlugin::Proposal'
	150	+ }, params);
	151	+
	152	+ UtilService.get(url, {params: paramsExtended}).then(function(data){
	153	+ cbSuccess(data);
	154	+ }).catch(function(error){
	155	+ cbError(error);
	156	+ });
	157	+ }
	158	+ }
	159	+})();
@@ -0,0 +1,67 @@		@@ -0,0 +1,67 @@
	1	+(function() {
	2	+ 'use strict';
	3	+
	4	+ describe('article services', function() {
	5	+ var ArticleService, httpBackend;
	6	+
	7	+ beforeEach(module('dialoga'));
	8	+
	9	+ beforeEach(inject(function(_ArticleService_, $httpBackend) {
	10	+ ArticleService = _ArticleService_;
	11	+ httpBackend = $httpBackend;
	12	+ }));
	13	+
	14	+ it('should return the main article', function() {
	15	+ var url = 'http://login.dialoga.gov.br/api/v1/articles/103358?fields=id,children,categories,abstract,title,image,url,setting,position&private_token=null';
	16	+ httpBackend.whenGET(url).respond({
	17	+ 'article':{'id':103358,'abstract':'\u003Cp style=\"text-align: center;\"\u003E\u003Ciframe src=\"https://www.youtube.com/embed/kpAdrO-emV0?rel=0\u0026amp;showinfo=0\u0026amp;iv_load_policy=3\u0026amp;controls=1\" style=\"max-width: 1000px; left: 5%;\" width=\"275\" height=\"200\"\u003E\u003C/iframe\u003E\u003C/p\u003E','title':'Dialoga Brasil','categories':[{'name':'Sa\u00fade','id':180,'slug':'saude','image':null},{'name':'Seguran\u00e7a P\u00fablica','id':182,'slug':'seguranca-publica','image':null},{'name':'Educa\u00e7\u00e3o','id':181,'slug':'educacao','image':null},{'name':'Redu\u00e7\u00e3o da Pobreza','id':183,'slug':'reducao-da-pobreza','image':null}],'image':null,'setting':{'custom_body_label':'Corpo','phase':'proposals','allow_topics':true,'moderate_comments':false,'comment_paragraph_plugin_activate':false,'author_name':'Leandro Nunes dos Santos','moderate_proposals':true,'allow_members_to_edit':false},'position':null,'children':[{'id':103644,'abstract':'\u003Cp\u003EUm caminho de oportunidades com o Enem: Sisu, Prouni, Fies, Ci\u00eancia sem Fronteiras\u003C/p\u003E','title':'Ensino Superior','categories':[{'name':'Educa\u00e7\u00e3o','id':181,'slug':'educacao','image':null}],'image':{'url':'/image_uploads/dialoga/0000/0128/enem.jpg'},'setting':{'color':'#cfe2f3','moderate_comments':false,'comment_paragraph_plugin_activate':false,'author_name':'Ronald Emerson Scherolt da Costa','allow_members_to_edit':false},'position':9},{'id':103673,'abstract':'\u003Cp\u003EA melhor escolha \u00e9 se informar.\u003C/p\u003E','title':'Incentivo ao Parto Normal','categories':[{'name':'Sa\u00fade','id':180,'slug':'saude','image':null}],'image':{'url':'/image_uploads/dialoga/0000/0092/parto-normal.jpg'},'setting':{'color':'#ff0000','moderate_comments':false,'comment_paragraph_plugin_activate':false,'author_name':'Ronald Emerson Scherolt da Costa','allow_members_to_edit':false},'position':6},{'id':103397,'abstract':'\u003Cp\u003ERenda, inclus\u00e3o produtiva e acesso a servi\u00e7os.\u003C/p\u003E','title':'Brasil Sem Mis\u00e9ria','categories':[{'name':'Redu\u00e7\u00e3o da Pobreza','id':183,'slug':'reducao-da-pobreza','image':null}],'image':{'url':'/image_uploads/dialoga/0000/0116/bsm_redim.jpg'},'setting':{'color':'','moderate_comments':false,'comment_paragraph_plugin_activate':false,'author_name':'Ronald Emerson Scherolt da Costa','allow_members_to_edit':false},'position':18},{'id':103379,'abstract':'\u003Cp\u003EResgate e atendimento 24 horas, sete dias da semana.\u003C/p\u003E','title':'SAMU 192 e UPAs','categories':[{'name':'Sa\u00fade','id':180,'slug':'saude','image':null}],'image':{'url':'/image_uploads/dialoga/0000/0060/SAMU.jpg'},'setting':{'color':'#45818e','moderate_comments':false,'comment_paragraph_plugin_activate':false,'author_name':'Ronald Emerson Scherolt da Costa','allow_members_to_edit':false},'position':4},{'id':103521,'abstract':'\u003Cp\u003EMais atendimento nos munic\u00edpios, mais sa\u00fade para quem mais precisa.\u003C/p\u003E','title':'Mais M\u00e9dicos','categories':[{'name':'Sa\u00fade','id':180,'slug':'saude','image':null}],'image':{'url':'/image_uploads/dialoga/0000/0025/Mais_M_dicos.jpg'},'setting':{'color':'#ffe599','moderate_comments':false,'comment_paragraph_plugin_activate':false,'author_name':'Ronald Emerson Scherolt da Costa','allow_members_to_edit':false},'position':1},{'id':103390,'abstract':'\u003Cp\u003EPreven\u00e7\u00e3o, tratamento e enfrentamento ao tr\u00e1fico.\u003C/p\u003E','title':'Crack, \u00e9 poss\u00edvel vencer!','categories':[{'name':'Seguran\u00e7a P\u00fablica','id':182,'slug':'seguranca-publica','image':null}],'image':{'url':'/image_uploads/dialoga/0000/0104/crack.jpg'},'setting':{'color':'#00ff00','moderate_comments':false,'comment_paragraph_plugin_activate':false,'author_name':'Ronald Emerson Scherolt da Costa','allow_members_to_edit':false},'position':14},{'id':103592,'abstract':'\u003Cp\u003EGarantir acesso \u00e0 prote\u00e7\u00e3o social.\u003C/p\u003E','title':'Assist\u00eancia Social','categories':[{'name':'Redu\u00e7\u00e3o da Pobreza','id':183,'slug':'reducao-da-pobreza','image':null}],'image':{'url':'/image_uploads/dialoga/0000/0122/assistencia_social.jpg'},'setting':{'color':'#a61c00','moderate_comments':false,'comment_paragraph_plugin_activate':false,'author_name':'Ronald Emerson Scherolt da Costa','allow_members_to_edit':false},'position':19},{'id':103426,'abstract':'\u003Cp\u003EDa sa\u00fade se cuida todos os dias.\u003C/p\u003E','title':'Vida saud\u00e1vel','categories':[{'name':'Sa\u00fade','id':180,'slug':'saude','image':null}],'image':{'url':'/image_uploads/dialoga/0000/0046/vida_saudavel.jpg'},'setting':{'color':'#d9d2e9','moderate_comments':false,'comment_paragraph_plugin_activate':false,'author_name':'Ronald Emerson Scherolt da Costa','allow_members_to_edit':false},'position':7},{'id':103695,'abstract':'\u003Cp\u003ENovo modelo de atua\u00e7\u00e3o em Seguran\u00e7a P\u00fablica.\u003C/p\u003E','title':'Seguran\u00e7a P\u00fablica Integrada','categories':[{'name':'Seguran\u00e7a P\u00fablica','id':182,'slug':'seguranca-publica','image':null}],'image':{'url':'/image_uploads/dialoga/0000/0152/policiaintegrada.jpg'},'setting':{'color':'#ff00ff','moderate_comments':false,'comment_paragraph_plugin_activate':false,'author_name':'Ronald Emerson Scherolt da Costa','allow_members_to_edit':false},'position':13},{'id':103663,'abstract':'\u003Cp\u003EMais educa\u00e7\u00e3o profissional e tecnol\u00f3gica, mais desenvolvimento\u003C/p\u003E','title':'Ensino T\u00e9cnico','categories':[{'name':'Educa\u00e7\u00e3o','id':181,'slug':'educacao','image':null}],'image':{'url':'/image_uploads/dialoga/0000/0134/Ensino_tecnico.jpg'},'setting':{'color':'#d0e0e3','moderate_comments':false,'comment_paragraph_plugin_activate':false,'author_name':'Ronald Emerson Scherolt da Costa','allow_members_to_edit':false},'position':10},{'id':103472,'abstract':'\u003Cp\u003EPol\u00edcia Federal, Pol\u00edcia Rodovi\u00e1ria Federal e For\u00e7a Nacional de Seguran\u00e7a P\u00fablica.\u003C/p\u003E','title':'For\u00e7as Federais de Seguran\u00e7a','categories':[{'name':'Seguran\u00e7a P\u00fablica','id':182,'slug':'seguranca-publica','image':null}],'image':{'url':'/image_uploads/dialoga/0000/0031/federais2.png'},'setting':{'color':'','moderate_comments':false,'comment_paragraph_plugin_activate':false,'author_name':'Ronald Emerson Scherolt da Costa','allow_members_to_edit':false},'position':16},{'id':103612,'abstract':'\u003Cp\u003EGarantir \u00e1gua para beber e produzir.\u003C/p\u003E','title':'Cisternas','categories':[{'name':'Redu\u00e7\u00e3o da Pobreza','id':183,'slug':'reducao-da-pobreza','image':null}],'image':{'url':'/image_uploads/dialoga/0000/0039/cisterna_redim.jpg'},'setting':{'color':'#0000ff','moderate_comments':false,'comment_paragraph_plugin_activate':false,'author_name':'Ronald Emerson Scherolt da Costa','allow_members_to_edit':false},'position':20},{'id':103442,'abstract':'\u003Cp\u003EComplemento \u00e0 renda e acompanhamento em educa\u00e7\u00e3o e sa\u00fade.\u003C/p\u003E','title':'Bolsa Fam\u00edlia','categories':[{'name':'Redu\u00e7\u00e3o da Pobreza','id':183,'slug':'reducao-da-pobreza','image':null}],'image':{'url':'/image_uploads/dialoga/0000/0013/bolsa_familia_redim.jpg'},'setting':{'color':'#ff9900','moderate_comments':false,'comment_paragraph_plugin_activate':false,'author_name':'Ronald Emerson Scherolt da Costa','allow_members_to_edit':false},'position':17},{'id':103507,'abstract':'\u003Cp\u003ETecnologia a servi\u00e7o da seguran\u00e7a do cidad\u00e3o.\u003C/p\u003E','title':'Sinesp','categories':[{'name':'Seguran\u00e7a P\u00fablica','id':182,'slug':'seguranca-publica','image':null}],'image':{'url':'/image_uploads/dialoga/0000/0098/sinesp.png'},'setting':{'color':'#00ff00','moderate_comments':false,'comment_paragraph_plugin_activate':false,'author_name':'Ronald Emerson Scherolt da Costa','allow_members_to_edit':false},'position':12},{'id':103683,'abstract':'\u003Cp\u003ESa\u00fade n\u00e3o tem pre\u00e7o.\u003C/p\u003E','title':'Aqui tem Farm\u00e1cia Popular','categories':[{'name':'Sa\u00fade','id':180,'slug':'saude','image':null}],'image':{'url':'/image_uploads/dialoga/0000/0019/saude_nao_tem_preco.jpg'},'setting':{'color':'#e69138','moderate_comments':false,'comment_paragraph_plugin_activate':false,'author_name':'Ronald Emerson Scherolt da Costa','allow_members_to_edit':false},'position':5},{'id':103457,'abstract':'\u003Cp\u003EA\u00e7\u00e3o conjunta e coopera\u00e7\u00e3o transfronteiri\u00e7a.\u003C/p\u003E','title':'Prote\u00e7\u00e3o das Fronteiras','categories':[{'name':'Seguran\u00e7a P\u00fablica','id':182,'slug':'seguranca-publica','image':null}],'image':{'url':'/image_uploads/dialoga/0000/0110/fronteira_redim.jpg'},'setting':{'color':'#a64d79','moderate_comments':false,'comment_paragraph_plugin_activate':false,'author_name':'Ronald Emerson Scherolt da Costa','allow_members_to_edit':false},'position':15},{'id':103494,'abstract':'\u003Cp\u003EDa Educa\u00e7\u00e3o Infantil ao Ensino M\u00e9dio.\u003C/p\u003E','title':'Educa\u00e7\u00e3o B\u00e1sica','categories':[{'name':'Educa\u00e7\u00e3o','id':181,'slug':'educacao','image':null}],'image':{'url':'/image_uploads/dialoga/0000/0076/Educa__o_B_sica.jpg'},'setting':{'color':'#fce5cd','moderate_comments':false,'comment_paragraph_plugin_activate':false,'author_name':'Ronald Emerson Scherolt da Costa','allow_members_to_edit':false},'position':8},{'id':103359,'abstract':'\u003Cp\u003EAcesso a exames e consultas com especialistas.\u003C/p\u003E','title':'Mais Especialidades','categories':[{'name':'Sa\u00fade','id':180,'slug':'saude','image':null}],'image':{'url':'/image_uploads/dialoga/0000/0083/mais_especialidades1.png'},'setting':{'color':'#ea9999','moderate_comments':false,'comment_paragraph_plugin_activate':false,'author_name':'Ronald Emerson Scherolt da Costa','allow_members_to_edit':false},'position':2},{'id':103485,'abstract':'\u003Cp\u003ECaminho para uma educa\u00e7\u00e3o de qualidade.\u003C/p\u003E','title':'Valoriza\u00e7\u00e3o dos Professores','categories':[{'name':'Educa\u00e7\u00e3o','id':181,'slug':'educacao','image':null}],'image':{'url':'/image_uploads/dialoga/0000/0140/valorizacao_professor.jpg'},'setting':{'color':'#ffff00','moderate_comments':false,'comment_paragraph_plugin_activate':false,'author_name':'Ronald Emerson Scherolt da Costa','allow_members_to_edit':false},'position':11},{'id':103416,'abstract':'\u003Cp\u003EEstrutura adequada para atender melhor a popula\u00e7\u00e3o na aten\u00e7\u00e3o b\u00e1sica.\u003C/p\u003E','title':'Melhorar os Postos de Sa\u00fade','categories':[{'name':'Sa\u00fade','id':180,'slug':'saude','image':null}],'image':{'url':'/image_uploads/dialoga/0000/0053/requalif_redim.jpg'},'setting':{'color':'#cc4125','moderate_comments':false,'comment_paragraph_plugin_activate':false,'author_name':'Ronald Emerson Scherolt da Costa','allow_members_to_edit':false},'position':3}]}});
	18	+
	19	+ ArticleService.getHome(function(result){
	20	+ expect(result.article).toBeDefined();
	21	+ expect(result.article.title).toEqual('Dialoga Brasil');
	22	+ expect(result.article.categories).toBeDefined();
	23	+ });
	24	+
	25	+ httpBackend.flush();
	26	+ });
	27	+
	28	+ // it('should return a list of articles', function() {
	29	+
	30	+ // httpBackend.whenGET('http://login.dialoga.gov.br/api/v1/articles').respond({
	31	+ // "articles": [
	32	+ // {
	33	+ // abstract: "Que exista educação continuada permanente dos profissionais!!",
	34	+ // author: null,
	35	+ // body: "",
	36	+ // categories: [],
	37	+ // children: [],
	38	+ // created_at: "2015/08/04 16:36:13",
	39	+ // end_date: null,
	40	+ // hits: 0,
	41	+ // id: 120568,
	42	+ // image: null,
	43	+ // parent: {id: 103379,…},
	44	+ // position: null,
	45	+ // profile: {identifier: "dialoga", name: "dialoga", id: 19195, created_at: "2015/04/15 09:38:36", image: null},
	46	+ // setting: {comment_paragraph_plugin_activate: false, author_name: "estacio"},
	47	+ // start_date: null,
	48	+ // tag_list: [],
	49	+ // title: "article_f4f4601c-0f36-e90e-d01a-9871f0bd126b",
	50	+ // votes_against: 0,
	51	+ // votes_for: 0,
	52	+ // }
	53	+ // ]
	54	+ // });
	55	+
	56	+ // ArticleService.getList().then(function(result) {
	57	+ // console.log('result', result);
	58	+
	59	+ // expect(result.data.article).toBeDefined();
	60	+ // expect(result.data.article.title).toEqual('Dialoga Brasil');
	61	+
	62	+ // });
	63	+
	64	+ // httpBackend.flush();
	65	+ // });
	66	+ });
	67	+})();
	@@ -42,6 +42,7 @@		@@ -42,6 +42,7 @@
42	AuthUserController.prototype.onClickLogout = function (){	42	AuthUserController.prototype.onClickLogout = function (){
43	var vm = this;	43	var vm = this;
44		44
		45	+ // TODO: emit event?
45	vm.AuthService.logout();	46	vm.AuthService.logout();
46	};	47	};
47		48
1	.custom-breadcrumb {	1	.custom-breadcrumb {
		2	+
		3	+ .breadcrumb {
		4	+ background: none;
		5	+ padding: 0;
		6	+ margin: 0;
		7	+ }
		8	+
		9	+ .glyphicon {
		10	+ color: #1E3E65;;
		11	+ border: 1px solid #1E3E65;
		12	+ border-radius: 100%;
		13	+ width: 23px;
		14	+ height: 23px;
		15	+ margin: 0;
		16	+ padding: 2px 0 0 3px;
		17	+ }
		18	+
2	.breadcrumb > li + li:before {	19	.breadcrumb > li + li:before {
3	- content: '>';	20	+ content: '\00BB';
4	}	21	}
5		22
6	.contraste & .breadcrumb {	23	.contraste & .breadcrumb {
@@ -0,0 +1,293 @@		@@ -0,0 +1,293 @@
	1	+(function() {
	2	+ 'use strict';
	3	+
	4	+ angular
	5	+ .module('dialoga')
	6	+ .factory('DialogaService', DialogaService);
	7	+
	8	+ /** @ngInject */
	9	+ function DialogaService($rootScope, $sce, API, ArticleService, UtilService, Slug, $log) {
	10	+ $log.debug('DialogaService');
	11	+
	12	+ var service = {
	13	+ getHome: getHome,
	14	+ getAbout: getAbout,
	15	+ getThemes: getThemes,
	16	+ getPrograms: getPrograms,
	17	+ getProgramBySlug: getProgramBySlug,
	18	+ getProgramsRandom: getProgramsRandom,
	19	+ getProposals: getProposals,
	20	+ getProposalsByTopicId: getProposalsByTopicId,
	21	+ getEvents: getEvents,
	22	+ getQuestions: getQuestions,
	23	+ searchProgram: searchProgram,
	24	+ searchProposal: searchProposal,
	25	+ };
	26	+
	27	+ var CACHE = {};
	28	+
	29	+ return service;
	30	+
	31	+ function getHome (cbSuccess, cbError) {
	32	+ if( !!CACHE.home ){
	33	+ cbSuccess(CACHE.home);
	34	+ }else{
	35	+ // load main content
	36	+ ArticleService.getArticleById(API.articleId.home, {
	37	+ 'fields[]': ['id','abstract','body','categories','children','children_count','title','image','url']
	38	+ }, function (data){
	39	+ CACHE.home = data;
	40	+
	41	+ _pipeHandleYoutube(data);
	42	+ _pipeHandleSlug(data);
	43	+ _pipeSetAbout(data);
	44	+ _pipeSetThemes(data);
	45	+ _pipeSetPrograms(data);
	46	+
	47	+ cbSuccess(data);
	48	+ }, cbError);
	49	+ }
	50	+ }
	51	+
	52	+ function getAbout (cbSuccess, cbError) {
	53	+ if( !!CACHE.about ){
	54	+ cbSuccess(CACHE.about);
	55	+ }else{
	56	+ // load article content
	57	+ ArticleService.getArticleById(API.articleId.about, {}, function (article){
	58	+ CACHE.about = article;
	59	+
	60	+ cbSuccess(CACHE.about);
	61	+ }, cbError);
	62	+ }
	63	+ }
	64	+
	65	+ function getThemes (cbSuccess, cbError) {
	66	+ if( !!CACHE.themes ){
	67	+ cbSuccess(CACHE.themes);
	68	+ }else{
	69	+ // load main content
	70	+ getHome(function(){
	71	+ if(!CACHE.hasOwnProperty('themes')){
	72	+ throw { name: 'NotFound', message: '"themes" is not defined. "article.categories" was loaded?'};
	73	+ }
	74	+ cbSuccess(CACHE.themes);
	75	+ },cbError);
	76	+ }
	77	+ }
	78	+
	79	+ function getPrograms (cbSuccess, cbError) {
	80	+ if( !!CACHE.programs ){
	81	+ cbSuccess(CACHE.programs);
	82	+ }else{
	83	+ // load main content
	84	+ getHome(function(){
	85	+ if(!CACHE.hasOwnProperty('programs')){
	86	+ throw { name: 'NotFound', message: '"programs" is not defined. "article.children" was handled?'};
	87	+ }
	88	+ cbSuccess(CACHE.programs);
	89	+ },cbError);
	90	+ }
	91	+ }
	92	+
	93	+ function getProgramBySlug (slug, cbSuccess, cbError) {
	94	+
	95	+ if( !CACHE.programs ){
	96	+ getPrograms(_getProgramBySlug, cbError);
	97	+ } else {
	98	+ _getProgramBySlug();
	99	+ }
	100	+
	101	+ function _getProgramBySlug(){
	102	+ var result = CACHE.programs.filter(function filterProgramBySlug (program) {
	103	+ if(angular.equals(program.slug, slug)) {
	104	+ return true;
	105	+ }
	106	+ return false;
	107	+ });
	108	+
	109	+ cbSuccess(result[0]);
	110	+ }
	111	+ }
	112	+
	113	+ function getProgramsRandom (cbSuccess, cbError) {
	114	+ getPrograms(cbSuccess, cbError);
	115	+ // TODO: get endpoint for production
	116	+ // if( !!CACHE.programsRandom ){
	117	+ // cbSuccess(CACHE.programsRandom);
	118	+ // }else{
	119	+ // // load article content
	120	+ // // UtilService.get(API.random_topics, {params: {
	121	+ // ArticleService.getArticleById(API.articleId.home, {params: {
	122	+ // 'fields[]': [
	123	+ // 'id', 'title', 'slug', 'abstract', 'children_count'],
	124	+ // 'content_type': 'ProposalsDiscussionPlugin::Topic'
	125	+ // }}).then(function(data){
	126	+ // CACHE.programsRandom = data;
	127	+
	128	+ // cbSuccess(data);
	129	+ // }).catch(function(error){
	130	+ // cbError(error);
	131	+ // });
	132	+ // }
	133	+ }
	134	+
	135	+ function getProposals (param, cbSuccess, cbError) {
	136	+ ArticleService.getProposals(param, function (data){
	137	+ CACHE.proposals = data;
	138	+
	139	+ cbSuccess(CACHE.proposals);
	140	+ }, cbError);
	141	+ }
	142	+
	143	+ function getProposalsByTopicId (topicId, params, cbSuccess, cbError) {
	144	+ ArticleService.getProposalsByTopicId(topicId, params, function (data){
	145	+ CACHE.proposals = data;
	146	+
	147	+ cbSuccess(CACHE.proposals);
	148	+ }, cbError);
	149	+ }
	150	+
	151	+ function getEvents (cbSuccess, cbError) {
	152	+ if( !!CACHE.events ){
	153	+ cbSuccess(CACHE.events);
	154	+ }else{
	155	+ // load main content
	156	+ getHome(function(){
	157	+ if(!CACHE.hasOwnProperty('events')){
	158	+ throw { name: 'NotFound', message: '"events" is not defined. "article.categories" was loaded?'};
	159	+ }
	160	+ cbSuccess(CACHE.events);
	161	+ },cbError);
	162	+ }
	163	+ }
	164	+
	165	+ function getQuestions (cbSuccess/, cbError/) {
	166	+ if( !!CACHE.questions ){
	167	+ cbSuccess(CACHE.questions);
	168	+ }else{
	169	+ // load content
	170	+ var questions = [];
	171	+
	172	+ CACHE.questions = questions;
	173	+ cbSuccess(CACHE.questions);
	174	+ }
	175	+ }
	176	+
	177	+ function searchProgram (cbSuccess, cbError) {}
	178	+
	179	+ function searchProposal (cbSuccess, cbError) {}
	180	+
	181	+ function _pipeHandleYoutube (data) {
	182	+ var abstract = data.article.abstract;
	183	+
	184	+ abstract = forceIframeParams(abstract);
	185	+ abstract = removeStylefromIframe(abstract);
	186	+
	187	+ data.article.abstract = abstract;
	188	+
	189	+ data.article.abstractTrusted = $sce.trustAsHtml(abstract);
	190	+ }
	191	+
	192	+ function _pipeHandleSlug (data) {
	193	+ // set slug to article
	194	+ if(!data.article.slug){
	195	+ data.article.slug = Slug.slugify(data.article.title);
	196	+ }
	197	+
	198	+ // set slug to programs
	199	+ for (var i = data.article.children.length - 1; i >= 0; i--) {
	200	+ var program = data.article.children[i];
	201	+ if(!program.slug){
	202	+ program.slug = Slug.slugify(program.title);
	203	+ }
	204	+ }
	205	+ }
	206	+
	207	+ function _pipeSetAbout (data) {
	208	+ if(!CACHE.hasOwnProperty('about')){
	209	+ CACHE.about = data.article.body;
	210	+ }
	211	+ }
	212	+
	213	+ function _pipeSetThemes (data) {
	214	+ if(!CACHE.hasOwnProperty('themes')){
	215	+ CACHE.themes = data.article.categories;
	216	+ }
	217	+
	218	+ _pipeCalcColors(data);
	219	+ }
	220	+
	221	+ function _pipeSetPrograms (data) {
	222	+ if(!CACHE.hasOwnProperty('programs')){
	223	+ CACHE.programs = data.article.children;
	224	+ CACHE.programs_count = data.article.children_count;
	225	+ }
	226	+ }
	227	+
	228	+ // Calculate color pallet
	229	+ function _pipeCalcColors (data) {
	230	+ // var darkFactor = 0.15;
	231	+ if(data.article.categories){
	232	+ // var categories = data.article.categories;
	233	+
	234	+ // Handle Category Data
	235	+
	236	+ // Handle Category Colors
	237	+ // for (var i = categories.length - 1; i >= 0; i--) {
	238	+ // var category = categories[i];
	239	+ // if(category.color && !category.bgColor){
	240	+ // category.colorDarker = $window.ColorLuminance(category.color, 0.15);
	241	+ // }
	242	+ // };
	243	+ }
	244	+ }
	245	+
	246	+ function forceIframeParams(abstract) {
	247	+ var patternIframe = '<iframe src="';
	248	+ var indexOfIframe = abstract.indexOf(patternIframe);
	249	+
	250	+ if (indexOfIframe === -1) {
	251	+ return abstract;
	252	+ }
	253	+
	254	+ var startSrcUrl = indexOfIframe + patternIframe.length;
	255	+ var endSrcUrl = abstract.indexOf('"', startSrcUrl);
	256	+ var srcUrl = abstract.substring(startSrcUrl , endSrcUrl);
	257	+ var resultUrl = srcUrl;
	258	+ var c = (srcUrl.indexOf('?') !== -1) ? '&' : ''; // already have url params. So, append-it
	259	+
	260	+ // enable js api
	261	+ if (srcUrl.indexOf('enablejsapi=1') === -1) {
	262	+ resultUrl += c + 'enablejsapi=1';
	263	+ c = '&'; // force to always use '&' after here
	264	+ }
	265	+
	266	+ // set opaque mode
	267	+ if (srcUrl.indexOf('wmode=opaque') === -1) {
	268	+ resultUrl += c + 'wmode=opaque';
	269	+ // c = '&'; // force to always use '&' after here
	270	+ }
	271	+
	272	+ abstract = abstract.replace(srcUrl, resultUrl);
	273	+
	274	+ return abstract;
	275	+ }
	276	+
	277	+ function removeStylefromIframe (abstract) {
	278	+ var patternIframe = 'style="';
	279	+ var indexOfIframe = abstract.indexOf('<iframe');
	280	+ var indexOfStyleOnIframe = abstract.indexOf('style="', indexOfIframe);
	281	+
	282	+ if (indexOfStyleOnIframe === -1) {
	283	+ return abstract;
	284	+ }
	285	+
	286	+ var startStyleContent = indexOfStyleOnIframe + patternIframe.length;
	287	+ var endStyleContent = abstract.indexOf('"', startStyleContent);
	288	+ var style = abstract.substring(startStyleContent , endStyleContent);
	289	+
	290	+ return abstract.replace(style, '');
	291	+ }
	292	+ }
	293	+})();
1	<div class="event-list">	1	<div class="event-list">
2	- <div class="event-tab--trigger" ng-show="!eventListCtrl.isListVisible" ng-click="eventListCtrl.toggleView()">
3	- <div class="event-tab--header">
4	- <div class="event-tab--icon">
5	- <span class="glyphicon glyphicon-calendar" aria-hidden="true"></span>	2	+
		3	+ <section class="color-theme-common-bg">
		4	+
		5	+ <div class="container">
		6	+ <div class="event-bar--trigger">
		7	+ <div class="event-bar--trigger-top">
		8	+ <div class="col-sm-6">
		9	+ <h1 class="title">
		10	+ <span class="glyphicon glyphicon-calendar icon-circle color-theme-common-fg"></span>
		11	+ Agenda <b>Dialoga Brasil</b>
		12	+ </h1>
		13	+ </div>
		14	+ <div class="col-sm-6">
		15	+ <h2 class="event-bar--trigger-toggle text-right" ng-click="eventListCtrl.toggleView()">
		16	+ <span><b>18</b> bate papos <b>agendados</b></span>
		17	+ <span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span>
		18	+ </h2>
		19	+ </div>
		20	+ </div>
6	</div>	21	</div>
7	- <div class="event-tab--title">Bate-Papo com ministr@s</div>
8	</div>	22	</div>
9	- <button class="btn btn-link event-tab--button">
10	- <span class="event-tab--total-scheduled">18</span>
11	- <span>bate-papos agendados</span>
12	- <span class="glyphicon glyphicon-triangle-bottom" aria-hidden="true"></span>
13	- </button>
14	- </div>	23	+ </section>
15		24
16	- <div class="event-list--panel ng-hide" ng-show="eventListCtrl.isListVisible">
17	- <div class="event-list--header">
18	- <div class="event-list--icon">
19	- <div class="glyphicon glyphicon-calendar" aria-hidden="true"></div>
20	- </div>
21	- <h2 class="event-list--title">Bate-papo com ministr@s</h2>
22	- <div class="event-list--minimize">
23	- <button type="button" class="btn btn-link" ng-click="eventListCtrl.toggleView()">
24	- <span>Minimizar</span>
25	- <span class="glyphicon glyphicon-triangle-top" aria-hidden="true"></span>	25	+ <section class="section-table">
		26	+ <div class="container">
		27	+ <!-- <div class="event-tab--trigger" ng-show="!eventListCtrl.isListVisible" ng-click="eventListCtrl.toggleView()">
		28	+ <div class="event-tab--header">
		29	+ <div class="event-tab--icon">
		30	+ <span class="glyphicon glyphicon-calendar" aria-hidden="true"></span>
		31	+ </div>
		32	+ <div class="event-tab--title">Bate-Papo com ministr@s</div>
		33	+ </div>
		34	+ <button class="btn btn-link event-tab--button">
		35	+ <span class="event-tab--total-scheduled">18</span>
		36	+ <span>bate-papos agendados</span>
		37	+ <span class="glyphicon glyphicon-triangle-bottom" aria-hidden="true"></span>
26	</button>	38	</button>
		39	+ </div> -->
		40	+
		41	+ <div class="event-list--panel ng-hide" ng-show="eventListCtrl.isListVisible">
		42	+ <div class="event-list--table-wrapper">
		43	+ <div class="table-responsive">
		44	+ <table class="table event-list--table">
		45	+ <!-- <thead></thead> -->
		46	+ <tbody>
		47	+ <tr>
		48	+ <td>
		49	+ <span class="date">dd/mm/aaaa</span>
		50	+ <span class="separator">-</span>
		51	+ <span class="time">HH:mm</span>
		52	+ <span class="separator">-</span>
		53	+ <span class="description">Mais médicos, Segurança Nacional, SAMU</span>
		54	+ <button type="button" class="btn color-theme-common-bg" ng-click="eventListCtrl.subscribe('EVENT_ID')">
		55	+ Inscreva-se
		56	+ <span class="sr-only">no bate-papo com (ministro) no dia (date) as (hh:mm) horas</span>
		57	+ </button>
		58	+ <span class="subscribers">123 inscritos</span>
		59	+ </td>
		60	+ </tr>
		61	+ <tr>
		62	+ <td>
		63	+ <span class="date">dd/mm/aaaa</span>
		64	+ <span class="separator">-</span>
		65	+ <span class="time">HH:mm</span>
		66	+ <span class="separator">-</span>
		67	+ <span class="description">Mais médicos, Segurança Nacional, SAMU</span>
		68	+ <button type="button" class="btn color-theme-common-bg">Inscreva-se</button>
		69	+ <span class="subscribers">123 inscritos</span>
		70	+ </td>
		71	+ </tr>
		72	+ <tr>
		73	+ <td>
		74	+ <span class="date">dd/mm/aaaa</span>
		75	+ <span class="separator">-</span>
		76	+ <span class="time">HH:mm</span>
		77	+ <span class="separator">-</span>
		78	+ <span class="description">Mais médicos, Segurança Nacional, SAMU</span>
		79	+ <button type="button" class="btn color-theme-common-bg">Inscreva-se</button>
		80	+ <span class="subscribers">123 inscritos</span>
		81	+ </td>
		82	+ </tr>
		83	+ <tr>
		84	+ <td>
		85	+ <span class="date">dd/mm/aaaa</span>
		86	+ <span class="separator">-</span>
		87	+ <span class="time">HH:mm</span>
		88	+ <span class="separator">-</span>
		89	+ <span class="description">Mais médicos, Segurança Nacional, SAMU</span>
		90	+ <button type="button" class="btn color-theme-common-bg">Inscreva-se</button>
		91	+ <span class="subscribers">123 inscritos</span>
		92	+ </td>
		93	+ </tr>
		94	+ <tr>
		95	+ <td>
		96	+ <span class="date">dd/mm/aaaa</span>
		97	+ <span class="separator">-</span>
		98	+ <span class="time">HH:mm</span>
		99	+ <span class="separator">-</span>
		100	+ <span class="description">Mais médicos, Segurança Nacional, SAMU</span>
		101	+ <button type="button" class="btn color-theme-common-bg">Inscreva-se</button>
		102	+ <span class="subscribers">123 inscritos</span>
		103	+ </td>
		104	+ </tr>
		105	+ <tr>
		106	+ <td>
		107	+ <span class="date">dd/mm/aaaa</span>
		108	+ <span class="separator">-</span>
		109	+ <span class="time">HH:mm</span>
		110	+ <span class="separator">-</span>
		111	+ <span class="description">Mais médicos, Segurança Nacional, SAMU</span>
		112	+ <button type="button" class="btn color-theme-common-bg">Inscreva-se</button>
		113	+ <span class="subscribers">123 inscritos</span>
		114	+ </td>
		115	+ </tr>
		116	+ </tbody>
		117	+ <!-- <tfooter></tfooter> -->
		118	+ </table>
		119	+ </div>
		120	+ </div>
27	</div>	121	</div>
28	</div>	122	</div>
29	- <div class="event-list--table-wrapper">
30	- <div class="table-responsive">
31	- <table class="table event-list--table">
32	- <!-- <thead></thead> -->
33	- <tbody>
34	- <tr>
35	- <td>
36	- <span class="date">dd/mm/aaaa</span>
37	- <span class="separator">-</span>
38	- <span class="time">HH:mm</span>
39	- <span class="separator">-</span>
40	- <span class="description">Mais médicos, Segurança Nacional, SAMU</span>
41	- <button type="button" class="btn" ng-click="eventListCtrl.subscribe('EVENT_ID')">
42	- Inscreva-se
43	- <span class="sr-only">no bate-papo com (ministro) no dia (date) as (hh:mm) horas</span>
44	- </button>
45	- <span class="subscribers">123 inscritos</span>
46	- </td>
47	- </tr>
48	- <tr>
49	- <td>
50	- <span class="date">dd/mm/aaaa</span>
51	- <span class="separator">-</span>
52	- <span class="time">HH:mm</span>
53	- <span class="separator">-</span>
54	- <span class="description">Mais médicos, Segurança Nacional, SAMU</span>
55	- <button type="button" class="btn">Inscreva-se</button>
56	- <span class="subscribers">123 inscritos</span>
57	- </td>
58	- </tr>
59	- <tr>
60	- <td>
61	- <span class="date">dd/mm/aaaa</span>
62	- <span class="separator">-</span>
63	- <span class="time">HH:mm</span>
64	- <span class="separator">-</span>
65	- <span class="description">Mais médicos, Segurança Nacional, SAMU</span>
66	- <button type="button" class="btn">Inscreva-se</button>
67	- <span class="subscribers">123 inscritos</span>
68	- </td>
69	- </tr>
70	- <tr>
71	- <td>
72	- <span class="date">dd/mm/aaaa</span>
73	- <span class="separator">-</span>
74	- <span class="time">HH:mm</span>
75	- <span class="separator">-</span>
76	- <span class="description">Mais médicos, Segurança Nacional, SAMU</span>
77	- <button type="button" class="btn">Inscreva-se</button>
78	- <span class="subscribers">123 inscritos</span>
79	- </td>
80	- </tr>
81	- <tr>
82	- <td>
83	- <span class="date">dd/mm/aaaa</span>
84	- <span class="separator">-</span>
85	- <span class="time">HH:mm</span>
86	- <span class="separator">-</span>
87	- <span class="description">Mais médicos, Segurança Nacional, SAMU</span>
88	- <button type="button" class="btn">Inscreva-se</button>
89	- <span class="subscribers">123 inscritos</span>
90	- </td>
91	- </tr>
92	- <tr>
93	- <td>
94	- <span class="date">dd/mm/aaaa</span>
95	- <span class="separator">-</span>
96	- <span class="time">HH:mm</span>
97	- <span class="separator">-</span>
98	- <span class="description">Mais médicos, Segurança Nacional, SAMU</span>
99	- <button type="button" class="btn">Inscreva-se</button>
100	- <span class="subscribers">123 inscritos</span>
101	- </td>
102	- </tr>
103	- </tbody>
104	- <!-- <tfooter></tfooter> -->
105	- </table>
106	- </div>
107	- </div>
108	- </div>	123	+ </section>
109	</div>	124	</div>